jQuery自動完成多輸入Highlited

我有一個問題在jquery自動完成highlited獲取多個輸入。第一個輸入得到白標明，第二可惜不是:(jQuery自動完成多輸入Highlited

所以，當我在Java中的字變粗體字，但在那之後，當我用逗號分隔的Java並輸入一個字這得到不大膽。

請幫助

<script>jQuery(document).ready(function() { 
    var availableTags=["Java","J2ee","Spring","Hibernate","CSS","HTML","Struts","Struts 2","Maven","Maven 2","Spring Roo","Warszawa","JSF 2.0","EJB"]; 
    $.extend($.ui.autocomplete.prototype, { 
     _renderItem: function(ul, item) { 
      var term = this.element.val(), 
       regex = new RegExp('(' + term + ')', 'gi'); 
      html = item.label.replace(regex , "<b>$&</b>"); 
      return $("<li></li>").data("item.autocomplete", item).append($("<a></a>").html(html)).appendTo(ul); 
     } 
    }); 

    function split(val) { 
     return val.split(/,\s*/); 
    } 

    function extractLast(term) { 
     return split(term).pop(); 
    } 

    $("#tags") 
     // don't navigate away from the field on tab when selecting an item 
     .bind("keydown", function(event) { 
      if (event.keyCode === $.ui.keyCode.TAB && 
        $(this).data("autocomplete").menu.active) { 
       event.preventDefault(); 
      } 
     }) 
     .autocomplete({ 
      minLength: 0, 
      source: function(request, response) { 
       // delegate back to autocomplete, but extract the last term 
       response($.ui.autocomplete.filter(
        availableTags, extractLast(request.term))); 
      }, 
      focus: function() { 
       // prevent value inserted on focus 
       return false; 
      }, 
      select: function(event, ui) { 
       var terms = split(this.value); 
       // remove the current input 
       terms.pop(); 
       // add the selected item 
       terms.push(ui.item.value); 
       // add placeholder to get the comma-and-space at the end 
       terms.push(""); 
       this.value = terms.join(", "); 
       return false; 
      } 
     }); 
}); 
</script>

來源

2012-10-30 user1786096

UPDATE

的代碼更好看後，這個問題的確是在這裏：

var term = this.element.val(), 
    regex = new RegExp('(' + term + ')', 'gi');

您正在獲取文本框的完整.val()。剛修好它是這樣的：

regex = new RegExp('(' + extractLast(term) + ')', 'gi');

EXTRA

無論如何，這可能不相關，但我通常做的就是大膽的作用是構成它的source:函數而不是重寫_renderItem 。就像這樣：

source: function (request, response) { 
     console.log(request.term); 
     var filtered = $.ui.autocomplete.filter(availableTags, extractLast(request.term)); 
     var regex = new RegExp('(' + extractLast(request.term) + ')', 'gi'); 
     var results = []; 
     filtered.forEach(function (item) { 
      results.push({ label: item.replace(regex , "<b>$1</b>"), value:item }); 
     }); 
     response(results); 
    }, 
    html: true, // see below why this is needed.

我已經更新了小提琴的代碼，它現在應該工作：http://jsfiddle.net/95aH7/1/

重要：您需要包括jquery.ui.autocomplete.html在腳本中，您加載jQuery用戶界面之後。同樣爲了擴展工作，您需要將html: true添加到自動填充選項（查看小提琴）。

來源

2012-10-30 16:40:49 Tallmaris

塔拉馬里斯感謝您的快速回復。我想你的想法，但沒有運氣:( 這裏是鏈接，身邊打球。 http://jsfiddle.net/95aH7/ 期待收到你的來信，謝謝！ – user1786096

我已經更新我的答案，它應該現在工作:) – Tallmaris

我真的很感謝Tallmaris，你讓我的一天:) – user1786096

jQuery自動完成多輸入Highlited

回答

相關問題