基本的な JQuery を使用する場合は、http://jqueryui.com/autocomplete/#remote の remoteDatasource の
例 を参照してください。
あなたが見ることができます:
$( "#birds" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
minlength は、調査を開始するために入力できる最小文字です。
サーバー側では、次のようなものを作成する必要があります
//connect to your database
$term = trim(strip_tags($_GET['term']));//retrieve the search term that autocomplete sends only when there are 2 char or more
$qstring = "SELECT description as value,id FROM test WHERE description LIKE '%".$term."%'"; //ONLY AN EXAMPLE
$result = mysql_query($qstring);//query the database for entries containing the term
while ($row = mysql_fetch_array($result,MYSQL_ASSOC))//loop through the retrieved values
{
$row['value']=htmlentities(stripslashes($row['value']));
$row['id']=(int)$row['id'];
$row_set[] = $row;//build an array
}
echo json_encode($row_set);//format the array into json data
クロスドメインを使用していない場合は、この JSON のようなものを uotput する必要があります (クロスドメインでは JSONP が必要ですが、これは別の話です)。
[{"value":"Some Name","id":1},{"value":"Some Othername","id":2}]
ワースト プラクティス 別の解決策 (ただし、論理的には問題ありません) は、レコードセットでループを使用して JS 配列全体を作成し、次のような文字列を生成することです。
var availableTags = [ "ActionScript", "AppleScript", "Asp",...];
そのため、テーブルをページにハードコードして不変にしていますが、各データはページのソースで公開されています。これは学習目的のみであり、本番環境では決してこれを行うことはありません。
代替モードでテーブルをマイニングしない場合は、そうしない方法を指定する必要がありますが、オートコンプリートは 2 つのアイデアに基づいています。1) 各キーパスはより良い制限を行うのに役立ちます。そのため、キーを押すたびに別のクエリを実行する必要があります。
2) 新しいキーが押されたとき、最後の結果は重要ではないため、最後の要求は破棄されます。
したがって、いくつかの条件では、入力されたキーが少ないときにクエリで動的制限を使用できます。結果を限られた量のレコードに制限できます。入力されたシーケンスが大きくなると、制限を解除したり、多数のレコードに制限したりできますだった状態が仕事をより良くするからです。
お役に立てれば幸いです