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自動完成 - 如何製作匹配文本粗體

回答

相關問題