jQuery UIの公式サイトにあるAutocompleteのデモ。
Autocomplete | jQuery UI
http://jqueryui.com/autocomplete/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags"> </div> |
ニーズがあったので、sourceをajaxでサーバーから取得するように書き直してみた。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script> $(function() { $("#tags").autocomplete({ source: function(request, response) { $.ajax({ url: "autocomplete-src.php", dataType: "json", type: "POST", cache: false, data: { param1: request.term }, success: function(data) { response(data); }, error: function(XMLHttpRequest, textStatus, errorThrown) { response(['']); } }); } }); }); </script> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags"> </div> |
サーバー側のコードは以下。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php //autocomplete-src.php $availableTags = array( "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ); if ($_POST['param1']) { $tags = array(); foreach ($availableTags as $tag) { //if (strpos($tag, $_POST['param1']) === 0) { //大小文字区別する if (stripos($tag, $_POST['param1']) === 0) { //大小文字区別しない $tags[] = $tag; } } echo json_encode($tags); } else { echo json_encode(array()); } ?> |