1

入力中に配列からテキストを検索/表示するために、JavaScriptを使用して小さなスクリプトを作成しています。ある種、Googleの自動提案ツール。

Jsスクリプトは次のとおりです。 

<script>
$(function() {
    var availableTags = <?php echo json_encode( $foo ); ?>;
     $( "#tags" ).autocomplete({ source: availableTags });
});
</script>

およびPHPの配列

  <?php 
        $foo = array("ambiguious","brown",
        "corps","demanding job","eat the pomes","fooling with it");
    ?>

配列内の各単語の最初の文字が残りの単語とどのように異なるかに注意してください。これで、（この場合は「あいまい」）が含まれている単語を表示する代わりに、を入力すると、その中にが含まれているすべての単語が表示されます。

ここに画像の説明を入力してください

似たような単語を検索することを考えましstrpos()たが、うまくいきません。どんな考えでもいいでしょう。ありがとうございました。

4

2 に答える 2

1

APIを見てください：

http://api.jqueryui.com/autocomplete/

例：カスタムソースコールバックを使用して、用語の先頭のみを照合する

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
</head>
<body>

<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">

<script>
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
$( "#autocomplete" ).autocomplete({
  source: function( request, response ) {
          var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
          response( $.grep( tags, function( item ){
              return matcher.test( item );
          }) );
      }
});
</script>

</body>
</html>
于 2013-03-03T16:00:15.503 に答える
0

私のライブデモを参照してください

HTML：

List: <input id="myContent" />

JQuery：

var myTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
$( "#myContent" ).autocomplete({
    source: function( request, response ) {
        var matches = $.map(myTags, function(tag) {
            if (tag.toUpperCase().indexOf(request.term.toUpperCase()) === 0) {
                return tag;
            }
        });
        response(matches);
    }
});
于 2013-03-03T16:43:48.353 に答える