jQuery自动完成 - 如何制作匹配文本粗体

我正在使用jQuery的自动完成向用户显示对文本输入字段的建议，并且我很难将建议列表中的匹配文本加粗。例如，如果用户开始输入在每个显示的应粗体这样的自动完成建议“BALT”，文字“BALT”：jQuery自动完成 - 如何制作匹配文本粗体

“波尔特 imore，美国 - 波尔特 imore国际机场。（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/

来源

2014-10-04 ray9209

你能做一个小提琴吗？ – 2014-10-04 04:36:29

在这里，看看这个：http://bartaz.github.io/sandbox.js/jquery.highlight.html – 2014-10-04 04:45:56

var ph是一个字符串，而不是一个jquery对象，所以突出显示插件不起作用。 – ray9209 2014-10-04 04:57:57

要做到这一点，你应该使用_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); 
};

来源

2014-10-04 07:15:19 user2811483

您遇到的问题是你有一个静态初始化源自动完成的，指望每次搜索时显示不同的数据。

相反，把你的强调处理的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"; 
    } 
}

来源

2014-10-04 05:17:06

jQuery自动完成 - 如何制作匹配文本粗体

回答

相关问题