2016-02-10 6 views
12

typeahahead.jsを使用して先読み検索を実装していますが、先読み検索ボックスのタイプとして、各レコードが2回表示されています。データソース(POST API呼び出し)を確認しました。私は間違っていますか?どんなヘルプや関連リンク。先読み検索で重複レコードが発生する

偶然の制御は、dup検出器には向かない。

同様の問題discussed hereでも解決策はありません。

<div id="bloodhound"> 
     <input class="typeahead" type="text" placeholder=" Search"> 
    </div> 


<script> 
     var result = new Bloodhound({ 
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
      queryTokenizer: Bloodhound.tokenizers.whitespace, 

      remote: { 
       url: 'https://api1.com/idocs/api', 
       wildcard: '%QUERY', 
       rateLimitWait: 300 , 
       transport: function (opts, onSuccess, onError) { 
        var url = opts.url; 
        $.ajax({ 
         url: url, 
         type: "POST", 
         success: onSuccess, 
         error: onError, 
        }); 


       }, 
       filter: function (data) { 
        if (data) { 
         return $.map(data, function (object) { 
          return data.data.results.data; 
         }); 
        } 
       } 
      }, 
      dupDetector: function (remoteMatch, localMatch) { 
       return remoteMatch.id === localMatch.id; 
      } 
     }); 
     result.initialize(); 
     $('input').typeahead(null, { 
      name: 'result', 
      displayKey: 'id', 
      source: result.ttAdapter(), 
      templates: { 
       empty: ['<div>', 'no results found', '</div>'], 
       suggestion: function (data) { 
        return '<p>' + data.basicinfo.object_name + '</p>'; 

       } 

      }, 
     }); 
+0

エラーを再現するにはjsbinまたはjsfiddleを作成できますか?そうでない場合は、あなたのコードをリファクタリングして、必須ではないもの(テンプレート、ヒント、バインドなど)を削除し、何が起こっているのかを確認できますか?それが何をしているのを見るためにあなたのフィルター機能のConsole.log? – whipdancer

+1

フィルター機能にconsole.logを入れます。 - filter:function(data){console.log(data); if(data){ return $ .map(data、function(object)); console.log(data.data); console.log(data.data.results); console.log( data.data.results.data); return data.data.results.data; }); } } – whipdancer

+0

あなたが持っているフィルター機能は私には意味がありません。マップ関数内のオブジェクトを処理する必要がありますが、代わりに "データ"を無視します。 – whipdancer

答えて

5

解決策が見つかりました。フィルターが間違っていました。私の解決策は

var result = new Bloodhound({ 
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
      queryTokenizer: Bloodhound.tokenizers.whitespace, 

      remote: { 
       url: 'abc.com&qterm=#%QUERY', 
       wildcard: '%QUERY', 
       rateLimitWait: 300 , 
       transport: function (opts, onSuccess, onError) { 
        var url = opts.url.split("#")[0]; 
        var query = opts.url.split("#")[1]; 
        $.ajax({ 
         url: url + query, 
         type: "POST", 
         success: onSuccess, 
         error: onError, 
        }); 


       }, 
       filter: function (data) { 
        if (data) { 
         var result = data.data.results.data; 
         return $.map(result, function (object) { 
          return { name: object.basicinfo.object_name, id: object.basicinfo.id }; 
         }); 
        } else { 
         return {}; 
        } 
       } 
      }, 
      dupDetector: function (remoteMatch, localMatch) { 
       return remoteMatch.id === localMatch.id; 
      } 
     }); 
     function onSuccess(data) { 
     } 
     result.initialize(); 
     $('input').typeahead(null, { 
      hint: true, 
      name: 'result', 
      displayKey: 'name', 
      source: result.ttAdapter(), 
      templates: { 
       empty: ['<div class="empty-message">', 'no results found', '</div>'].join('\n'), 
       suggestion: function (data) { 
        return '<p class="type-suggestion">' + data.name + '</p> \n\r'; 
       } 
      }, 

     }) 
関連する問題