So markieren Sie Eingabewörter in Autocomplete jquery ui

Question

Könnten Sie mir bitte helfen, die eingegebenen Wörter in der Auto-Vervollständigen-Textbox hervorzuheben. Ich bin bevölkern bereits die zur automatischen Vervollständigung Worte, und ich brauche nur die eingegebenen Wörter markieren alone.i bin neu in Jquery Autocomplete

ich bin die Ausgabe als Text wie <Strong>Br</Strong>ijesh immer // als Text gesehen
und nicht als Hervorhebung der Br allein.

unten ist das Snippet

$(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 

Bitte mir helfen.

Answer 1

Es scheint mir, Sie sollten die _renderItem Methode überschreiben, um benutzerdefinierte Rendering der Elemente zu haben. Der Code könnte etwa folgende sein:

$("#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); 
    }; 

Im Code verwende ich jQuery UI CSS "ui-state-Highlight" für die Hervorhebung. Sie können stattdessen <strong> verwenden. Außerdem schließe ich den Code nicht ein, der irgendwelchen RegEx Zeichen entgehen würde, die in this.term sein könnten. Ich wollte dir nur die Grundidee erklären. Sehen Sie zum Beispiel the answer für weitere Informationen.

AKTUALISIERT: Neuere Versionen von jQuery UI verwendet .data("ui-autocomplete") statt .data("autocomplete").

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); 
    }; 
} 

AKTUALISIERT 2: Um Ihren Code arbeiten in beiden (alten und neuen) Versionen von jQuery machen können Sie so etwas wie die folgenden tun Auf die gleiche Weise "item.autocomplete" der Name "ui-autocomplete-item" geändert werden sollte. Siehe here.

Answer 2

Wenn Sie neue jQueryUI verwenden, sollten Sie diese ersetzen:

.data("autocomplete")._renderItem 

dazu:

.data("uiAutocomplete")._renderItem 

Answer 3

wir es so auch umsetzen können.

$("#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); 
    }; 

Answer 4

Für eine korrekte in jQuery UI machen - v1.12.1 "div" verwenden, nicht "ein"

$.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); 
}; 

Answer 5

$ .ui.autocomplete.prototype._renderItem = function (ul, item) { item.label = item.label.replace (neue RegExp ("(?!) [^ &;] +;) (?! <>) (" + $ .ui.autocomplete.escapeRegex (this .term) + ") (?! [^ <>]>) (?! [^ &;] +;)", "gi"), "$ 1 "); return $ ("

") .data ("item.autocomplete", Element) .append ("" + item.label + "") .anfügenTo (ul); };

Verwenden Sie diese