jquery otomatik tamamlama vurgulama

JQuery otomatik tamamlama özelliğini, otomatik tamamlama sonuçlarında kullanıcının yazdıklarını nasıl vurgulayabilirim? Ben kullanıyorum kodudur:jquery otomatik tamamlama vurgulama

$("#keyword").autocomplete({ 
     source: "ajax/autocomplete.php?action=keyword", 
     minLength: 2 
    });

bağlantı Tomasz itibaren uygulanmaya Bu çalıştı yayınlanmıştır: orada

$("#keyword").autocomplete({ 
     source: "ajax/autocomplete.php?action=keyword", 
     highlight: function(value, term) { 
    return value.replace(new RegExp("("+term+")", "gi"),'<b>$1</b>'); 
    }, 
     minLength: 2 
    });

yok şans ya. jQuery otomatik tamamlama benden nefret ediyor gibi görünüyor.

Güncelleme: David Murdoch'a teşekkürler, şimdi bir cevabım var! Aşağıdaki yanıtın @ Herman'ın kopyasını görün.

kaynak

2010-09-12 Jaime Cross

Çözümünüzü gönderdiğiniz için teşekkür ederiz. Benim için mükemmel çalıştı. –

Çözümü bulduysanız, yanıt olarak postalayıp kabul etmelisiniz. Bu tamamen iyi kabul edilir; bakınız [Meta Stack Overflow'taki bu SSS] (http://meta.stackexchange.com/questions/17463/should-i-ask-a-question-i-know-the-answer-to/17467#17467). –

@Jaime: Lütfen devam edin ve cevabınızı ... yanıtına taşıyın. –

sayesinde bu yararlı yanıt sağlamak için http://www.vervestudios.co/ David Murdoch gider:

$.ui.autocomplete.prototype._renderItem = function(ul, item){ 
    var term = this.term.split(' ').join('|'); 
    var re = new RegExp("(" + term + ")", "gi") ; 
    var t = item.label.replace(re,"<b>$1</b>"); 
    return $("<li></li>") 
    .data("item.autocomplete", item) 
    .append("<a>" + t + "</a>") 
    .appendTo(ul); 
}; 
$("#keyword").autocomplete({ 
    source: "ajax/autocomplete.php?action=keyword", 
    minLength: 2 
});

kaynak

2011-10-14 09:11:12

Teşekkürler @Herman Schaaf Hala alışkınım ve bu konuda yorum görmedim. :( –

Bu iyi çalışıyor, ancak kullanıcının yalnızca yazdığı metni vurgulamak istiyorsam, örneğin, kelime listesi "abcabc" kelimesini içeriyorsa ve kullanıcı "ab" yazmışsa, bunu yalnızca ilk olarak istiyorum. ab "dize vurgulamak istiyorum. Ben istiyorum değiştirmek gerekir? –

Ben bu çözme çirkin yolları çok gördüm, bu şimdiye kadar gördüğüm en güzel olduğunu. Uygulanacak! – ptrn

Düşünce somone bu yararlı olabilir. Yukarıdaki ilkeleri kullanan eksiksiz bir HTML dokümanıdır. Bazı çalışmalarım için bir prototip olarak kullandım.

<html xmlns="http://www.w3.org/1999/xhtml"> 

    <!-- 

     orders.html simply returns the following text 

     Basketball#Football#Baseball#Helicopter#gubbins#harry potter#banyan 


    --> 

    <head id="Head1" runat="server"> 
     <title>AutoComplete Box with jQuery</title> 
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" 
      rel="stylesheet" type="text/css" /> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 
     <script type="text/javascript"> 

      function loadData() { 

       var sURL = "orders.htm"; 

       $.ajaxSetup({ cache: false }); 

       $.ui.autocomplete.prototype._renderItem = function (ul, item) { 
        var term = this.term.split(' ').join('|'); 
        var re = new RegExp("(" + term + ")", "gi"); 
        var t = item.label.replace(re, "<b>$1</b>"); 
        return $("<li></li>") 
        .data("item.autocomplete", item) 
        .append("<a>" + t + "</a>") 
        .appendTo(ul); 
       }; 

       $.get(sURL, function (responseText) { 
        data = responseText.split('#'); 

        $("#txtSearch").autocomplete({ 
         //source: availableSports 
         source: data, 
         minLength: 2 

        }); 

       }); 

      } 

     </script> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
     <div class="demo"> 
      <div class="ui-widget"> 
       <label for="tbAuto"> 
        Enter data: 
       </label> 
       <input type="text" id="txtSearch" class="autosuggest" onkeyup="loadData();" /> 
      </div> 
     </form> 
    </body> 
    </html>

Umarım bana yardım ettiği gibi yardımcı olur.

kaynak

2013-09-03 10:38:26

jquery otomatik tamamlama vurgulama

cevap

İlgili konular