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

回答

相关问题