Question

我正在使用jQuery的自动完成功能向用户显示文本输入字段的建议，并且我很难将建议列表中的匹配文本变为粗体。例如，如果用户开始输入“balt”，则显示的每个自动填充建议中的文本“balt”应如下所示加粗：

“ Balt imore，USA - Balt imore Intl。（BWI）”

（类似于Kayak.com在搜索表单上的内容）。

JS：

var airportList = [
{"IATA":"BWI","city":"Baltimore","airp":"Baltimore Intl.","country":"USA"},
{"IATA":"SEA","city":"Seattle","airp":"Seattle Tacoma Intl.","country":"USA"},
{"IATA":"LAX","city":"Los Angeles","airp":"Los Angeles Intl.","country":"USA"},
{"IATA":"JFK","city":"New York","airp":"John F. Kennedy Intl.","country":"USA"}];

$("#input1").autocomplete({
    minLength: 3,
    source: function(request, response){

    var searchTerm = request.term.toLowerCase();
    var ret = [];
    var ph;
    $.each(airportList, function(i, airport){
        if (airport.city.toLowerCase().indexOf(searchTerm) === 0 || airport.IATA.toLowerCase().indexOf(searchTerm) !== -1 || airport.country.toLowerCase().indexOf(searchTerm) === 0 || airport.airp.toLowerCase().indexOf(searchTerm) === 0) {
        ph = airport.city + ', ' + airport.country + ' - ' + airport.airp + ' (' + airport.IATA + ')';

        // ph is each suggestion that will appear in the suggestions list, i need to 
        // make the substring in ph that matches the searchTerm appear bold; I've tried
        // replacing the substring with the same substring with <strong> tags around it
        // and the .bold() function, neither worked.

        ret.push(ph);
        }

        });

        response(ret);
    }
});

小提琴：http://jsfiddle.net/ray9209/v9o71L11/2/

Answer 1

要实现此目的，您应该使用_renderItem函数，该函数基本上呈现结果列表中的项目。在此函数中，您将使用由标记包围的新字符串替换搜索的字符串。

var airportList = [
{"IATA":"BWI","city":"Baltimore","airp":"Baltimore Intl.","country":"USA"},
{"IATA":"SEA","city":"Seattle","airp":"Seattle Tacoma Intl.","country":"USA"},
{"IATA":"LAX","city":"Los Angeles","airp":"Los Angeles Intl.","country":"USA"},
{"IATA":"JFK","city":"New York","airp":"John F. Kennedy Intl.","country":"USA"}];

$("#input1").autocomplete({
minLength: 3,
source: function(request, response){

var searchTerm = request.term.toLowerCase();
var ret = [];
var ph;
$.each(airportList, function(i, airport){
    if (airport.city.toLowerCase().indexOf(searchTerm) === 0 ||   airport.IATA.toLowerCase().indexOf(searchTerm) !== -1 || airport.country.toLowerCase().indexOf(searchTerm) === 0 || airport.airp.toLowerCase().indexOf(searchTerm) === 0) {
    ph = airport.city + ', ' + airport.country + ' - ' + airport.airp + ' (' + airport.IATA + ')';

    // ph is each suggestion that will appear in the suggestions list, i need to 
    // make the substring in ph that matches the searchTerm appear bold; I've tried
    // replacing the substring with the same substring with <strong> tags around it
    // and the .bold() function, neither worked.

    ret.push(ph);
    }

    });

    response(ret);
}
}).data("ui-autocomplete")._renderItem = function( ul, item ) {
    return $( "<li>" )
    .attr( "data-value", item.value )
    .append( $( "<a>" ).html( item.label.replace(new RegExp(this.term, 'gi'),"<b>$&</b>") ) )
    .appendTo( ul );
};

Answer 2

您遇到的问题是您是否使用静态来源初始化自动完成功能，并希望每次搜索时都显示不同的数据。

相反，将您的突出显示过程放在response()事件中，以便在每次搜索之后捕获返回的数据，如下所示：

,response: function( event, ui ) {
   //render through the ui object here to update the highlighting on the results.
   if(ui.length>0){
     ui[0].label = "highlighted text";
   }
}

jQuery自动完成 - 如何使匹配的文本变为粗体

2 个答案: