Как выделить слова jquery ui autocomplete

Question

Я использую этот скрипт http://jqueryui.com/demos/autocomplete/#default с базой данных. Я хочу выделить набранные слова следующим образом: www.docs.jquery.com/Plugins/Autocomplete. Пожалуйста, помогите мне.

Answer 1

Похоже, что работает на http://docs.jquery.com/Plugins/Autocomplete имеет метод выделения.

Вы можете воссоздать этот захватывая регулярное выражение их метод выделения и использовать его, чтобы изменить результаты, которые получают отправленные обратно из вашего запроса Ajax вам базы данных:

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

Это, вероятно, будет умнее добавить <strong> оберните на стороне сервера, так как это, скорее всего, уже будет проходить через каждый результат.

Answer 2

мне пришлось изменить код в соответствии с этим Highlight jQuery UI autocomplete, чтобы заставить его работать

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