オートコンプリートのすべての行に余分な情報を追加する方法

Question

世界中から会場のオートコンプリートを行っていますが、うまくいきましたが、今度は会場名の次のラインにその特定の会場のアドレスが必要です。

私のオートコンプリートがABCDとして会場名を読んでいる場合は、ABCDの下にこの会場の住所が必要です。私は会場の住所を返すことができますが、ここに置く方法はわかりません。

私はJavaScript

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

    var city_lat = $('#city_lat').val(); 
    var city_lon = $('#city_lon').val(); 

    request.call = "auto_poi_ugc"; 
    request.cityid = $('#eventCityId').val(); 
    request.lat = city_lat; 
    request.lon = city_lon; 

    setTimeout(function() { 
     ajax_req = $.ajax({ 
     url: "/ajaxcalls", 
     dataType: "json", 
     data: request, 
     success: function(data) {  
      data.splice(venue_limit,data.length); 
      response(data); 
     } 
     }); 
     }, 700); 
    }, 
    select: function(event, ui) { 

     if(ui.item.value == "Loading..."){ 
      return false; 
     } 
     if(ajax_req != undefined) 
     { 
      ajax_req.abort(); 
     } 
     if(ui.item.value != '') 
     { 
      $('#venue_latitude').val(ui.item.latitude); 
      $('#venue_longitude').val(ui.item.longitude); 
      $('#primus_id').val(ui.item.id); 
      $('#event_venue_add').val(ui.item.add); 
     } 
    }, 
    search: function(event, ui) { 
     if($(this).hasClass('error-border')){ 
      $(this).removeClass('error-border'); 
     } 
    }, 
}); 

Answer 1

あなたがそれにオートコンプリートを追加することによって、それを達成することができます。

.autocomplete("instance")._renderItem = function(ul, item) { 
    if(item.add == undefined){ 
     item.add = ""; 
    } 
    return $("<li>").append("<div>" + item.label + "</div><div class='v_address_auto'>" + item.add + "</div>").appendTo(ul); 
}; 

http://jqueryui.com/autocomplete/#custom-data

あなたのコードは、あなたが私の多くの時間を節約するこの

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

var city_lat = $('#city_lat').val(); 
var city_lon = $('#city_lon').val(); 

request.call = "auto_poi_ugc"; 
request.cityid = $('#eventCityId').val(); 
request.lat = city_lat; 
request.lon = city_lon; 

setTimeout(function() { 
    ajax_req = $.ajax({ 
    url: "/ajaxcalls", 
    dataType: "json", 
    data: request, 
    success: function(data) {  
     data.splice(venue_limit,data.length); 
     response(data); 
    } 
    }); 
    }, 700); 
}, 
select: function(event, ui) { 

    if(ui.item.value == "Loading..."){ 
     return false; 
    } 
    if(ajax_req != undefined) 
    { 
     ajax_req.abort(); 
    } 
    if(ui.item.value != '') 
    { 
     $('#venue_latitude').val(ui.item.latitude); 
     $('#venue_longitude').val(ui.item.longitude); 
     $('#primus_id').val(ui.item.id); 
     $('#event_venue_add').val(ui.item.add); 
    } 
}, 
search: function(event, ui) { 
    if($(this).hasClass('error-border')){ 
     $(this).removeClass('error-border'); 
    } 
}, 
}).autocomplete("instance")._renderItem = function(ul, item) { 
    if(item.add == undefined){ 
     item.add = ""; 
    } 
    return $("<li>").append("<div>" + item.label + "</div><div class='v_address_auto'>" + item.add + "</div>").appendTo(ul); 
};