自動填充搜索表單，在文本中間搜索

Question

我正在使用自動填充來搜索查詢。

在這個源代碼中，如果你輸入ac你可以得到accepts,action_name。

但是，我想獲得action_name輸入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。然後，我們只是檢查，如果輸入的是在e串

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>