リミット私は私のプロジェクトでjQueryのオートコンプリートを使用しているオートコンプリートの結果の行数、および開始文字と一致文字列のみ

Question

、

<div class="ui-widget"> 
<label for="tags">Tags: </label> 
    <input id="tags"> 
</div> 

JSONファイル

[ 
     { "value": "Saree", 
     "url": "/collection/saree" }, 
     { "value": "Lehangas", 
     "url": "/collection/lehangas" }, 
     { "value": "Dresses", 
     "url": "/collection/dresses" }, 
     { "value": "Tunics", 
     "url": "/collection/tunics" }, 
     { "value": "Kurtis", 
     "url": "/collection/kurtis" }, 
     { "value": "Blouses", 
      "url": "/collection/blouses" }, 
     { "value": "Duppattas", 
      "url": "/collection/duppattas" }, 
      { "value": "Shawls", 
      "url": "/collection/shawls" }, 
      { "value": "Plazos", 
      "url": "/collection/plazos" }, 
      { "value": "Skirts", 
      "url": "/collection/skirts" }, 
      { "value": "Patiala", 
      "url": "/collection/patiala" } 
] 

が私のjsファイル：

$(function(){ 
$("#tags").autocomplete({ 
    source: "/static/admin/json/search.json", 
    select: function (event, ui) { 
     window.location = ui.item.url; 
    } 

}); 

}); 

どの文字を入力してもすべての結果が表示されます。最初の文字とそれに続く文字に従って文字列を一致させたい。また、表示する行数を10に制限したいと考えています。

ありがとうございます。

Answer 1

HTMLここ

<div class="ui-widget"> 
    <label for="tags">Tags: </label> 
    <input id="tags"> 
</div> 

私の場合は、JSONデータがJSファイルで提供されていますので、私は、あなたがあなたのjsファイルでJSONデータを取得しているか否かはわかりませんし、私は自分でJSONデータにアクセスしています私はあなたがそれらのことを管理できることを願っています。

JSファイル

var data = [ 
 
     { "value": "Saree", 
 
     "url": "/collection/saree" }, 
 
     { "value": "Lehangas", 
 
     "url": "/collection/lehangas" }, 
 
     { "value": "Dresses", 
 
     "url": "/collection/dresses" }, 
 
     { "value": "Tunics", 
 
     "url": "/collection/tunics" }, 
 
     { "value": "Kurtis", 
 
     "url": "/collection/kurtis" }, 
 
     { "value": "Blouses", 
 
      "url": "/collection/blouses" }, 
 
     { "value": "Duppattas", 
 
      "url": "/collection/duppattas" }, 
 
      { "value": "Shawls", 
 
      "url": "/collection/shawls" }, 
 
      { "value": "Plazos", 
 
      "url": "/collection/plazos" }, 
 
      { "value": "Skirts", 
 
      "url": "/collection/skirts" }, 
 
      { "value": "Patiala", 
 
      "url": "/collection/patiala" } 
 
] 
 

 

 
$(function(){ 
 
\t $("#tags").autocomplete({ 
 
\t \t source: function(request, response){ 
 
\t \t \t var lengthOfSearch= request.term.length; 
 
\t \t \t var arr = jQuery.map(data, function(element, index) { 
 
\t \t \t \t if(element.value.substr(0,lengthOfSearch).toLowerCase() === request.term.toLowerCase()){ 
 
\t \t \t \t \t return element; 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t \t response(arr.slice(0,10)); 
 
\t \t }, 
 
\t \t select: function (event, ui) { 
 
\t \t \t window.location = ui.item.url; 
 
\t \t } 
 
\t }); 
 
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<div class="ui-widget"> 
 
<label for="tags">Tags: </label> 
 
    <input id="tags"> 
 
</div>