jQuery 자동 완성 - 일치하는 텍스트를 굵게 만드는 방법

Question

jQuery의 자동 완성 기능을 사용하여 텍스트 입력 필드에 대한 제안을 사용자에게 표시하고 제안 목록에서 일치하는 텍스트를 굵게 표시하는 데 어려움을 겪고 있습니다. 예를 들어, 사용자가 "BALT"텍스트 "BALT"같이 굵은해야 표시되는 자동 완성 제안의 각 입력을 시작하는 경우 :

"발트 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/

Answer 1

는 기본적를 렌더링하는 _renderItem 기능을 사용해야합니다이를 위해 : 그것은 같은, 렌더링 전에

대신, 각 검색 후 반환 된 데이터를 캡처 response() 이벤트에 강조 프로세스를 넣어 결과 목록의 항목 이 함수에서는 검색된 문자열을 태그로 둘러싼 새로운 문자열로 바꿉니다.

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: 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"; 
    } 
}