如何突出顯示自動完成中的輸入單詞jquery ui

請幫我突出顯示自動完成文本框中的輸入單詞。我已經填充自動完成的話，我只是需要突出輸入的單詞alone.i是新來的jQuery的自動完成如何突出顯示自動完成中的輸入單詞jquery ui

我得到的輸出像<Strong>Br</Strong>ijesh文字//視爲文本
而不是突出單獨使用Br。

下面是摘錄

$(document).ready(function() { 
$("#studentName").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      url: "Webservice.asmx/GetStudentNames", 
      data: "{'prefixText':'" + request.term + "'}", 
      dataType: "json", 
      success: function (data) { 
      var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"); 
       response($.map(data.d, function (item) { 
        return { 
        label: item.split('|')[0].replace(regex, "<Strong>$1</Strong>"), 
        val: item.split('|')[1] 
        } 
       })) 
      }, 

      failure: function (response) { 
       ServiceFailed(result); 
      } 
     }); 
    }, 
    select: function (event, ui) { 
    txtStudent(ui.item.val, ui.item.label); //Student name and id used in this method 
    }, 
    minLength: 2 
}); 
});    // End of ready method

請幫助我。

來源

2012-03-27 pal

還有一點言論。您可以使用'item'的'val'和'label'屬性，但文檔（參見[Datamodel]部分中的[here]（http://wiki.jqueryui.com/w/page/12137709/Autocomplete））描述它應該是'value'（不是'val'）和'label'。 – Oleg 2012-03-27 16:23:01

在我看來，你應該覆蓋_renderItem方法來自定義渲染項目。代碼可能如下：

$("#studentName").autocomplete({/* all your parameters*/}) 
    .data("autocomplete")._renderItem = function (ul, item) { 
     var newText = String(item.value).replace(
       new RegExp(this.term, "gi"), 
       "<span class='ui-state-highlight'>$&</span>"); 

     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + newText + "</a>") 
      .appendTo(ul); 
    };

在代碼中，我使用jQuery UI CSS「ui-state-highlight」來突出顯示。您可以改用<strong>。此外，我不包含可能會在this.term之內轉義任何RegEx字符的代碼。我只想解釋你的主要想法。例如，查看the answer以獲取更多信息。

更新：更新版本的jQuery UI使用.data("ui-autocomplete")而不是.data("autocomplete")。爲了使你的代碼在兩種（新舊）版本的jQuery的工作，你可以這樣做以下：

var $elem = $("#studentName").autocomplete({/* all your parameters*/}), 
    elemAutocomplete = $elem.data("ui-autocomplete") || $elem.data("autocomplete"); 
if (elemAutocomplete) { 
    elemAutocomplete._renderItem = function (ul, item) { 
     var newText = String(item.value).replace(
       new RegExp(this.term, "gi"), 
       "<span class='ui-state-highlight'>$&</span>"); 

     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + newText + "</a>") 
      .appendTo(ul); 
    }; 
}

更新2：以同樣的方式名稱"item.autocomplete"應改爲"ui-autocomplete-item"。見here。

來源

2012-03-27 11:53:35 Oleg

@pal：順便說一句，我看到你還沒有使用過你的[投票]（http://stackoverflow.com/privileges/vote-up）。投票是搜索引擎的主要標準。您每天可以投票約30個問題或答案**（請參閱[此處]（http://meta.stackexchange.com/a/5213/147495））。因此，通過對您在計算器上找到的有用信息進行投票，您可以幫助其他訪問者查找信息。所以我建議你開始使用你的投票權。 – Oleg 2012-03-28 10:49:56

如果搜索項是可以解析爲正則表達式的任何東西，特別是括號或美元符號等，'RegExp（this.term，「gi」）'將導致戲劇（可能會引發JavaScript錯誤）。 – 2013-09-03 07:34:47

@nness：如果您需要突出顯示文本，您可以使用'.toUpperCase（）。indexOf（）'在字符串'item.value'中定位子字符串this.term。你可以使用簡單的JavaScript字符串來插入''。或者，您可以在調用RegEx之前轉義所有特殊字符*（例如，請參閱[答案]（http://stackoverflow.com/a/9168127/315935））。我原來的答案的主要思想是沒有提供完美的解決方案，但只是表明可以使用自定義'_renderItem'實現以自定義方式呈現菜單項。 – Oleg 2013-09-03 10:24:45

如果您正在使用新的jQueryUI的，此時應更換此：

.data("autocomplete")._renderItem

這樣：

.data("uiAutocomplete")._renderItem

來源

2013-10-30 11:39:58 Adam

，我們還可以實現像這樣。

$("#studentName").autocomplete({/* all your parameters*/}); 
    $.ui.autocomplete.prototype._renderItem = function (ul, item) {   
     var t = String(item.value).replace(
       new RegExp(this.term, "gi"), 
       "<span class='ui-state-highlight'>$&</span>"); 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + t + "</a>") 
      .appendTo(ul); 
    };

來源

2015-08-21 10:10:23

爲了正確渲染jQuery用戶界面 - v1.12.1使用「格」，而不是「一個」

$.ui.autocomplete.prototype._renderItem = function (ul, item) {   
    var t = String(item.value).replace(
      new RegExp(this.term, "gi"), 
      "<strong>$&</strong>"); 
    return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append("<div>" + t + "</div>") 
     .appendTo(ul); 
};

來源

2017-01-12 14:02:34 wildnove

$ .ui.autocomplete.prototype._renderItem =功能（UL，項） {「+ $ .ui.autocomplete.escapeRegex（this！」）{item.label = item.label.replace（new RegExp（「（？！[^ &;] +;）（?! < [^ <>] ）「）（？！[^ <>]>）（？！[^ &;] +;）」，「gi」），「$ 1「）; return $（「

」） .data（「item.autocomplete」，item） .append（「」+ item.label +「」）。appendTo（UL）; };

使用此

來源

2017-01-13 09:25:23

如何突出顯示自動完成中的輸入單詞jquery ui

回答

相關問題