jQuery Autocomplete - 如何使匹配的文本加粗答案

【问题标题】：jQuery Autocomplete - how to make matching text boldjQuery Autocomplete - 如何使匹配的文本加粗
【发布时间】：2014-10-04 15:15:19
【问题描述】：

我正在使用 jQuery 的自动完成功能向用户显示文本输入字段的建议，但我很难将建议列表中的匹配文本设置为粗体。例如，如果用户开始输入“balt”，则显示的每个自动完成建议中的文本“balt”都应该像这样加粗：

“巴尔特美国伊莫尔 - 巴尔特伊莫尔国际机场 (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/

【问题讨论】：

你能做个小提琴吗？
来看看这个：bartaz.github.io/sandbox.js/jquery.highlight.html
var ph 是一个字符串，而不是一个 jquery 对象，所以高亮插件不起作用。
当您可以在显示时呈现 jquery 对象（选择器）时，为什么要将 html 放入 json 对象中
您需要将 jQuery UI 添加到您的外部资源中，否则您的小提琴将无法正常工作

标签： jquery autocomplete jquery-autocomplete

【解决方案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 );
};

【讨论】：

【解决方案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";
   }
}

【讨论】：