0

私は ajax 呼び出しでブートストラップの先行入力を使用して、自分の Web サイトの一種のインスタント検索を作成しています。Typeahead はタイトルのみを処理でき、href は処理できないように見えることを除けば、すべてうまく機能しています。例：

私のPHPコードはこれです：

$results = mysql_query("MY SELECT QUERY GOES HERE");

$array = array();

while ($row = mysql_fetch_assoc($results)){
    $array[] = $row['title'];
}

echo json_encode($array);

そして私のJavascriptはここにあります：

$('#quickSearch').typeahead({
    source: function (query, process) {

        $.ajax({
            url: "my_php_file.php",
            type: "POST",
            data: 'query=' + query,
            dataType: 'JSON',
            async: true,
            success: function(data){
                  console.log(data)
                  process(data)
            }
        })
    }
});

...これらをまとめると、次の HTML になります。

<ul class="typeahead dropdown-menu" display: block;">
     <li data-value="Baltimore" class="active">
           <a href="#"><span class="highlighter">B</span>altimore</a>
     </li>
</ul>

プロセス関数は Bootstrap に組み込まれた関数で、各結果のタイトルを取得してドロップダウン リストに入力します。データベースから href も取得できるようにしたいのですが、ドロップダウンのリンクは、単に表示するのではなく、実際に機能します。

問題は、$array[] = array("title"=>$row['title'],"href"=>$row['link']");PHP ファイルに書き込むと、おそらく process() が追加データを処理できないため、すべてが壊れてしまうことです。

誰か提案はありますか？Typeahead の詳細については、http ://twitter.github.com/bootstrap/javascript.html#typeahead を参照してください。

ありがとう

4

2 に答える 2

1

結果に JSON 形式を使用し、「マッチャー」、「ソーター」、「アップデーター」などのいくつかのオプションを定義できます。

PHP

$results = mysql_query("MY SELECT QUERY GOES HERE");
$array = array();
while ($row = mysql_fetch_assoc($results)){
    $array[] = array("title"=>$row['title'],"href"=>$row
}
echo json_encode($array);

Javascript:

$('#quickSearch').typeahead({
    source: function (query, process) {

        $.ajax({
            url: "my_php_file.php",
            type: "POST",
            data: 'query=' + query,
            dataType: 'JSON',
            async: true,
            success: function(data){
                       var resultList = data.map(function (item) {
                       var link = { href: item.href, name: item.title };
                       return JSON.stringify(link);
                     });
                return process(resultList);
            }
        })
    },

    matcher: function (obj) {
        var item = JSON.parse(obj);
        return ~item.title.toLowerCase().indexOf(this.query.toLowerCase())
    },

    sorter: function (items) {          
       var beginswith = [], caseSensitive = [], caseInsensitive = [], item;
       while (link = items.shift()) {
            var item = JSON.parse(link);
            if (!item.title.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(JSON.stringify(item));
            else if (~item.name.indexOf(this.query)) caseSensitive.push(JSON.stringify(item));
            else caseInsensitive.push(JSON.stringify(item));
        }

        return beginswith.concat(caseSensitive, caseInsensitive)

    },

    highlighter: function (link) {
        var item = JSON.parse(link);
        var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
        return item.title.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
            return '<strong>' + match + '</strong>'
        })
    },

    updater: function (link) {
        var item = JSON.parse(link);
       $('#quickSearch').attr('href', item.href);
       return item.title;
    }
});
于 2013-02-19T14:43:08.703 に答える
1

item.titleが ajax ソース関数でのみ使用されるこの完璧なスクリプトについての 1 つの注意事項。

コードの残りの部分は、次で定義したようにitem.nameにする必要があります。

var link = { href: item.href, name: item.title };
于 2015-06-30T19:26:25.273 に答える