Jak wyróżnić słowa wejściowe w jquery autouzupełniania ui

Question

Czy możesz pomóc mi w wyróżnieniu wpisanych słów w polu autouzupełniania. Jestem już wypełnianie słów autouzupełniania i muszę po prostu podkreślić wpisywanych słów alone.i jestem nowy jQuery autouzupełniania

Dostaję wyjście jako tekst jak <Strong>Br</Strong>ijesh // postrzegane jako tekst
a nie jako podkreślenie Tylko Br.

Poniżej znajduje się fragment

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

Proszę mi pomóc.

Answer 1

Wydaje mi się, że należy zastąpić metodę _renderItem, aby uzyskać niestandardowe renderowanie elementów. Kod może być o co następuje:

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

W kodzie używam jQuery UI CSS "ui-state-highlight" na podkreślenie. Zamiast tego możesz użyć <strong>. Ponadto nie uwzględniam kodu, który mógłby uciec od jakichkolwiek znaków RegEx, które mogą znajdować się wewnątrz this.term. Chciałem ci tylko wyjaśnić główny pomysł. Zajrzyj na przykład pod numer the answer, aby uzyskać dodatkowe informacje.

AKTUALIZACJA: Nowsze wersje jQuery UI używa .data("ui-autocomplete") zamiast .data("autocomplete"). Aby dokonać kod pracy w obu (starych i nowych) wersji jQuery można zrobić coś jak poniżej:

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

Updated 2: W ten sam sposób nazwa "item.autocomplete" należy zmienić "ui-autocomplete-item". Zobacz here.

Answer 2

Jeśli używasz nowego jQueryUI, należy wymienić to:

.data("autocomplete")._renderItem 

do tego:

.data("uiAutocomplete")._renderItem 

Answer 3

możemy również wdrożyć go w takim stanie.

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

dla prawidłowego renderowania w jQuery UI - v1.12.1 używać "div", a nie "do"

$.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 poz) { item.label = item.label.replace (new RegExp ("(?! [^ &;] +;) (?! < [^ <>] ) (" + $ .ui.autocomplete.escapeRegex (to .term) + ") (?! [^ <>]>) (?! [^ &;] +;)", "gi"), " "); return $ ("

") .data ("item.autocomplete", pozycja) .append ("" + item.label + "") .appendTo (ul); };

Użyj tej