6

先行入力の結果をページの特定のdivに合わせようとしています。JSONコールバックデータを取得しましたが、特定のdivにデータを入力するためにそれを使用する方法がわかりません。プロセス関数は、検索フィールドのすぐ下に、長さに関係なく結果を一覧表示する唯一の効果があります。

これが私のコードです。特定のdivにデータを入力するためにコールバックデータを利用する方法を知っていますか？

$('#search').typeahead({
          source: function(query, process) {
              $.ajax({
                  url: '/action/search.php?action=autocomplete',
                  type: 'POST',
                  data: 'query=' + query,
                  dataType: 'JSON',
                  async: true,
                  success: function(data) {
                      //process(data);
                  },
                  minLength: 1
              });
          }
    });
4

3 に答える 3

5

実際には、特定のページ要素に結果を取得するための非常に簡単な方法がありますが、実際に文書化されているかどうかはわかりません.

ソースコードを検索すると、オプションmenuを渡すことができることがわかります。これは、ラッピングメニュー要素がどのように見えるかを定義できるようにすることを目的としているようですが、セレクターを渡すことができ、これをターゲットとして使用します.

HTMLフラグメントを考えると：

<input id='#typeahead' type='text'>

<h2>Results</h2>
<ul id="typeahead-target"></ul>

次を使用して、結果をul要素内に表示できます。

$('#typeahead').typeahead({menu: '#typeahead-target'});
于 2014-06-06T02:13:11.627 に答える
1

最初に .hide {display:none;} という名前の css クラスを作成します

$(typeahead class or id name).typeahead(
        {
            hint: false,
            highlight: true,
            minLength: 1,
            classNames: {
                menu: 'hide' // add class name to menu so default dropdown does not show
            }
        },{
            name: 'names',
            display: 'name',
            source: names,
            templates: {
                suggestion: function (hints) {
                    return hints.name;
                }
            }
        }
    );
    $(typeahead class or id name).on('typeahead:render', function (e, datum) 
    {
       //empty suggestion div that you going to display all your result
        $(suggestion div id or class name').empty();
        var suggestions = Array.prototype.slice.call(arguments, 1);
        if(suggestions.length){
            for(var i = 0; i < suggestions.length; i++){
                $('#result').append(liveSearch.template(
                    suggestions[i].name,
                    suggestions[i].id));
            }
        }else{
            $('#result').append('<div><h1>Nothing found</h1></div>');
        }
    });
于 2017-10-10T14:58:03.663 に答える