javascript - 如何在自动完成的每一行中添加额外信息

Question

我正在对来自世界各地的场馆进行自动完成，并且工作正常，但现在我希望该特定场馆的地址位于场馆名称的下一行。

如果我的自动完成将 field 名称读作 ABCD，那么在 ABCD 下方它应该是该 field 的地址。我可以返回 field 地址，但不知道如何将它放在这里。

我的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 );
};