如何自定義jQuery的自動完成搜索機制

我想自定義的jQuery自動完成的搜索行爲，現有的代碼如下如何自定義jQuery的自動完成搜索機制

var data = [ 

     {"url":"http://site/test.php", "label":" test course"}] 

      $k(".input").autocomplete({ 
      max:10, 
      source: data, 
      multipleSeparator: " ", 
      select: function(event, ui) { 
       window.location.href = ui.item.url; 
      }, 
      appendTo: "#results", 
      open: function() { 
       var position = $("#results").position(), 
        left = position.left, top = position.top; 

       $("#results > ul").css({left: left + 20 + "px", 
             top: top + 4 + "px" }); 

      } 
     });

我需要忽略數據中的空格（搜索數據）。

假設如果我輸入「testcourse」，我必須得到像「test course」這樣的結果。

如何做到這一點。

來源

2013-08-07 n92

只要您輸入「測試」，「測試課程」應該在選項列表中。如果你打算輸入整個東西，你將需要修改他們返回的'data'源項目。也許是自定義連接。 – DevlshOne

在data中複製任何具有相同條目的空白的值，只有label不同（不含空格）。

var data = [ 
    {"url":"http://site/test.php", "label":" test course"}, 
    {"url":"http://site/test.php", "label":" testcourse"} 
];

這裏有一個方法可以遍歷data並添加不在的時候你帶了白色的空間相同的任何項目：

for(i = 0; i < data.length; i++){ 
    var noWhsp = data[i].label.replace(/\s/g, ''); 
    if(data[i].label !== noWhsp){ 
     data.push({"url":data[i].url, "label":noWhsp}) 
    } 
}

來源

2013-08-07 13:19:54 Faust

但是重複將顯示假設如果我輸入「測試」我得到像「測試過程」和「testcourse」這樣的結果，這對用戶來說是多餘的和令人困惑的。是否有任何替代方法來避免重複。 – n92

就在數據添加另一個JSON值沒有空格。

var data = [ 
    {"url":"http://site/test.php", "label":" test course", "search_term":"testcourse"}, 
];

使用搜索項由「_」符號seaching和顯示拉布勒結果

或

var data = [ 
     {"url":"http://site/test.php", "label":" test course_testcourse"}, 
];

聽到分裂拉布勒值，並用標籤搜索[1]和得到導致值標籤[0]

來源

2013-08-12 06:39:41

我剛剛找到解決方案，請參閱我的答案 – n92

我實現它，代碼如下

$k("#autocomplete").autocomplete({ 
     max:10, 
     source: function(req, responseFn) { 
      var re = $k.ui.autocomplete.escapeRegex(req.term).toUpperCase(); 
      re = re.replace(/\s+/g, "") 
      var matcher = new RegExp(".*"+$.trim(re).replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "")+".*"); 
      var a = $k.grep(data, function(item,index){ 
       return matcher.test(item.label.toUpperCase().replace(/\s+/g, "")); 
      }); 
     responseFn(a); 
     }, 
     matchContains: true, 
     multipleSeparator: "", 
     multiple: true, 
     select: function(event, ui) { 
      window.location.href = ui.item.url; 
     }, 
     appendTo: "#results", 
     open: function() { 
      var position = $("#results").position(), 
       left = position.left, top = position.top; 

      $("#results > ul").css({left: left + 20 + "px", 
            top: top + 4 + "px" }); 

     } 
});

來源

2013-08-13 04:33:58 n92

如何自定義jQuery的自動完成搜索機制

回答

相關問題