स्वत: पूर्ण jquery ui

Question

में इनपुट शब्दों को हाइलाइट करने के लिए कैसे करें आप ऑटो पूर्ण टेक्स्ट बॉक्स में टाइप किए गए शब्दों को हाइलाइट करने में मेरी सहायता कर सकते हैं। मैं पहले से ही स्वत: पूर्ण शब्द को आबाद करने कर रहा हूँ और मैं सिर्फ लिखे गए शब्द अकेले jQuery के स्वत: पूर्ण करने के लिए नया हूँ उजागर करने के लिए

मैं <Strong>Br</Strong>ijesh की तरह पाठ के रूप में उत्पादन हो रही है // पाठ
रूप पर प्रकाश डाला रूप में नहीं देखा और जरूरत अकेले ब्र।

नीचे टुकड़ा

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

मेरी मदद कृपया है।

Answer 1

ऐसा लगता है कि आपको आइटम की कस्टम प्रतिपादन के लिए _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-राज्य के मुख्य आकर्षण" का उपयोग करें। आप इसके बजाय <strong> का उपयोग कर सकते हैं। इसके अलावा मुझे उस कोड को शामिल नहीं किया गया है जो RegEx वर्णों से बच जाएगा जो this.term के अंदर हो सकता है। मैं आपको केवल मुख्य विचार समझाऊंगा। अतिरिक्त जानकारी के लिए उदाहरण के लिए the answer देखें।

UPDATED: अधिक jQuery यूआई के हाल के संस्करणों .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); 
    }; 
} 

UPDATED: उसी तरह नाम "item.autocomplete""ui-autocomplete-item" को बदला जाना चाहिए। here देखें।

Answer 2

आप नए jQueryUI का उपयोग कर रहे हैं, तो आप इस बदलना चाहिए:

.data("autocomplete")._renderItem 

इस के लिए

:

.data("uiAutocomplete")._renderItem 

Answer 3

हम भी इस तरह इसे लागू कर सकते हैं।

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

एक सही के लिए jQuery UI में प्रस्तुत करना - v1.12.1 "div", नहीं "एक"

$.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 = फ़ंक्शन का उपयोग करें (उल, आइटम) { item.label = item.label.replace (नया RegExp ("(?! [^ &;] +;) (?! < [^ <>] ) (" + $ .ui.autocomplete.escapeRegex (यह .term) + ") (?! [^ <>]>) (?! [^ &;] +;)", "जीआई"), "$ 1 "); $ ("

" .डेटा ("item.autocomplete", आइटम) .append ("" + item.label + "") ।appendTo (उल); };

इस