Comment surligner les mots jquery ui autocomplete

Question

J'utilise ce script http://jqueryui.com/demos/autocomplete/#default avec base de données. Je veux mettre en évidence les mots tapés comme ceci: www.docs.jquery.com/Plugins/Autocomplete. Aidez-moi, s'il vous plaît.

Answer 1

On dirait que ce qui fonctionne sur http://docs.jquery.com/Plugins/Autocomplete a une méthode de surbrillance.

Vous pouvez recréer ce en saisissant l'expression rationnelle leur méthode de mise en surbrillance et l'utiliser pour modifier vos résultats qui sont renvoyés de votre demande ajax base de données pour vous:

$("#example").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url: "search.php", 
      dataType: "json", 
      data: request, 
      success: function(data) { 

       var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"); 
       var result = $.map(data, function(value){ 
        return value.replace(regex, "<strong>$1</strong>"); 
       }); 
       response(result); 
      } 
     }); 
    } 
}); 

Il serait probablement plus intelligent d'ajouter le <strong> Enveloppez-vous du côté serveur, car il est probable que vous soyez déjà en boucle sur chacun des résultats.

Answer 2

je dû modifier le code en fonction de cette Highlight jQuery UI autocomplete pour le faire fonctionner

 $("#searchBox").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
       url: "search.php", 
       dataType: "json", 
       data: request, 
       success: function(data) { 
        var escapedTerm=request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1"); 
        var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + escapedTerm + ")(?![^<>]*>)(?![^&;]+;)", "gi"); 
        var result = $.map(data, function(value){ 
         //console.log(value); 
         value.label=value.label.replace(regex, "<span class='highlight'>$1</span>"); 
         return value; 
        }); 
        response(result); 
       } 
      }); 
     }, 
     minLength: 3 
    }) 
    .data('autocomplete')._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append('<a>' + item.label + '</a>') 
      .appendTo(ul); 
    };