3

が欲しいです 。複数のキーワードを含むオートコンプリート テキスト ボックス。データベースからです。jQueryを使用してクライアント側で操作を行うと、意味があります。データベースのサイズが大きいと、いくつかの問題が発生します。これがサーバー側でどのように行われるかを知り、適切な結果を得る必要があります。

このトピックは既に見ましたが、操作はクライアント側で行われます。データベースから直接必要です。

    <html>
 <head>
    <title>Testing</title>
    <link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .srchHilite { background: yellow; }
    </style>
    <script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            NewAuto();
        });

        function NewAuto() {
            var availableTags = ["win the day", "win the heart of", "win the heart of someone"];
            alert(availableTags);  // alert = win the day,win the heart of,win the heart of someone
            $("#tags").autocomplete({
                source: function(requestObj, responseFunc) {
                    var matchArry = availableTags.slice(); // Copy the array
                    var srchTerms = $.trim(requestObj.term).split(/\s+/);
                    // For each search term, remove non-matches.
                    $.each(srchTerms, function(J, term) {
                        var regX = new RegExp(term, "i");
                        matchArry = $.map(matchArry, function(item) {
                            return regX.test(item) ? item : null;
                        });
                    });
                    // Return the match results.
                    responseFunc(matchArry);
                },
                open: function(event, ui) {
                    // This function provides no hooks to the results list, so we have to trust the selector, for now.
                    var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a");
                    var srchTerm = $.trim($("#tags").val()).split(/\s+/).join('|');
                    // Loop through the results list and highlight the terms.
                    resultsList.each(function() {
                        var jThis = $(this);
                        var regX = new RegExp('(' + srchTerm + ')', "ig");
                        var oldTxt = jThis.text();
                        jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>'));
                    });
                }
            });
        }

    </script>
</head>
<body>
    <div>
        <label for="tags">
            Multi-word search:
        </label>
        <input type="text" id="tags" />
    </div>
</body>
</html>
4

2 に答える 2

0

それがあなたを助けるかもしれないSelect2を見​​てください。

Select2 は、選択ボックスの jQuery ベースの代替品です。検索、リモート データ セット、および結果の無限スクロールをサポートします。

リンク

于 2013-07-13T17:37:01.267 に答える
0

コードでは、ソースを配列として提供しています。コメントで述べたように、問題はjqueryでソースにデータを取得する方法です。

これを機能させるには、次のことを行う必要があります

  1. ヘッダーにjqueryをロードします。これはすでに行っています。

  2. ソースタグに配列、文字列、または関数を提供します。[ソースタグについては api を参照][1]

     [1]: http://api.jqueryui.com/autocomplete/#option-source

  3. サーバーサイド スクリプトで、Jason でエンコードされた文字列を指定します。

API を確認すると、これについて明確に言及されていることがわかります。

ここにjqueryコードがあります

  $(function() {


    $( "#option_val" ).autocomplete({
     dataType: "json",
      source: 'search.php',
      minLength: 1,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.value + " aka " + ui.item.id :
          "Nothing selected, input was " + this.value );
      }
    });
  });
  </script>

これがphpコードです。別のサーバーサイドスクリプト言語を使用している場合は申し訳ありません。

<?php
// Create connection
$con=mysqli_connect("localhost","wordpress","password","wordpress");

// Check connection
if (mysqli_connect_errno($con))
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$result=mysqli_query($con,"select * from wp_users");

while($row = mysqli_fetch_array($result))
  {

    $results[] = array('label' => $row['user_login']);
  }

echo json_encode($results);
mysqli_close($con);
?>
于 2013-07-14T08:15:50.307 に答える