オートコンプリート検索フォーム、テキストの真ん中で検索

Question

私は、オートコンプリートを使用してクエリを検索しています。

このソースコードでは、acを入力するとaccepts,action_nameが得られます。

しかし、入力nameのaction_nameを通常の検索フォームとして取得したいと考えています。

どうすればいいですか？

$(function() { 
    var data = [ 
    'accepts', 
    'action_name', 
    'add', 
    'add_column', 
    'add_index', 
    'add_timestamps', 
    'after_create', 

    ]; 

    $('#txtKeywd').autocomplete({ 
    source: function(request, response) { 
     response(
     $.grep(data, function(value){ 
      return value.indexOf(request.term) === 0; 
     }) 
    ); 
    }, 
    autoFocus: true, 
    delay: 500, 
    minLength: 2 
    }); 
}); 

Answer 1

$(function() { 
 
    var availableTags = [ 
 
    'accepts', 
 
    'action_name', 
 
    'add', 
 
    'add_column', 
 
    'add_index', 
 
    'add_timestamps', 
 
    'after_create', 
 
    ]; 
 
    $("#tags").autocomplete({ 
 
    source: availableTags 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

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

Answer 2

あなたは、これはそれを行いますプラグインオートコンプリートを使用する場合：

$(document).ready(function() { 
    var data = [ 
    'accepts', 
    'action_name', 
    'add', 
    'add_column', 
    'add_index', 
    'add_timestamps', 
    'after_create', 

    ]; 

    $('#txtKeywd').autocomplete({ 
    source: function(request, response) { 
     var re = $.ui.autocomplete.escapeRegex(request.term); 
     var matcher = new RegExp(re, "i"); 
     var a = $.grep(data, function(item,index){ 
      return matcher.test(item); 
     }); 
     response(a); 
    }, 
    autoFocus: true, 
    delay: 500, 
    minLength: 2 
    });  

}); 

あなたはオートコンプリートのために使用されるデフォルトの正規表現をオーバーライドする必要があります。

Answer 3

1。値がデータ要素にあるかどうかをチェックするのではなく、データ要素を-と_で分割することができます。

value.split(/-|_/) 

2。それから、関数としてパラメータをとるforEach()でループします。 eはデータ要素の値です。

value.split(/-|_/).forEach(function(e) {}); 

3。次に、入力が文字列であるかどうかを確認します。

if(e.indexOf(request.term) === 0) {} 

4です。真の場合と真の場合のみgrep()に連絡する必要があります。これを行うには、ブール値を設定する必要があります。

if(e.indexOf(request.term) === 0) { isIn = true; return; } 

以上return;は、現在の分割データ要素で検索を終了します。

$(function() { 
 
    var data = [ 
 
    'accepts', 
 
    'action_name', 
 
    'add', 
 
    'add_column', 
 
    'add_index', 
 
    'add_timestamps', 
 
    'after_create', 
 
    ]; 
 

 
    $('#tags').autocomplete({ 
 
    source: function(request, response) { 
 
     response(
 
     $.grep(data, function(value) { 
 
      let isIn; 
 
      value.split(/-|_/).forEach(function(e) { 
 
      if(e.indexOf(request.term) === 0) { isIn = true; return; } 
 
      }); 
 
      return isIn 
 
     }) 
 
    ); 
 
    }, 
 
    autoFocus: true, 
 
    delay: 500, 
 
    minLength: 2 
 
    }); 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 

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

もちろん

、これはページのロード時に一度すべてのデータ値を分割し、チェックするために特別な配列に格納することによって改善することができます。

はここで完全なコードです。

Answer 4

チェックこのアウト

var data = [ 
 
    'accepts', 
 
    'action_name', 
 
    'add', 
 
    'add_column', 
 
    'add_index', 
 
    'add_timestamps', 
 
    'after_create', 
 
]; 
 

 
function split(val) { 
 
    return val.split(/ \s*/); 
 
} 
 
function extractLast(term) { 
 
    return split(term).pop(); 
 
} 
 

 
$("#opt") 
 
    .autocomplete({ 
 
     minLength: 0, 
 
     source: function(request, response) { 
 
      var term = request.term, 
 
       results = []; 
 
      term = extractLast(request.term); 
 
      if (term.length > 0) { 
 
       results = $.ui.autocomplete.filter(data, term); 
 
      } 
 
      response(results); 
 
     }, 
 
     focus: function() { 
 
      return false; // prevent value inserted on focus 
 
     }, 
 
     select: function(event, ui) { 
 

 
     } 
 
    });

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    
 
<div class="ui-widget"> 
 
    <label for="opt">Type Here:</label><br/> 
 
    <input id="opt" size="50"> 
 
</div>