【PHP】AutoComplete輸入自動完成 / input下拉搜尋mysql

AutoComplete這個功能的名稱真的好難找阿，終於被我找到了，我一直用 “input下拉搜尋” 或是 “input mysql 預判” 都找不到！然後突然想到自動完成這個詞，就被iZO給抓到了!

Autoomplete 來自 jQuery UI，讓我們寫程式更加的方便。
首先在 index.php 加上這個外掛於 <head> 標籤內

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$('#auto').autocomplete({
source: "autoizo.php",
minLength: 1
});
});
</script>

<body> 內的input

<input id="auto" type="text">

建立一個 autoizo.php

<?php
    $db_local="host";
    $db_user="user";
    $db_pass="pass";
    $db_select="db";
    $conn=mysql_connect($db_local,$db_user,$db_pass);
    mysql_select_db($db_select);
    $query=mysql_query("SELECT * FROM `user` WHERE `name` like '%" . $_GET['term'] . "%'"); //查詢user資料表裡的name欄
    while($row=mysql_fetch_array($query)){
        $name[] = $row['name'];
    }
    mysql_close();
    echo json_encode($name); //輸出必須是json
?>

完成 ~

展開文章／收合

相關