Jquery自动完成在下拉菜单中显示更多详细信息

Question

我有一个自动完成功能，可以正常工作，但我希望将下拉细节稍微扩展一点。它看起来像这样：

数据文件（格式lookup.php）：

if ($db) 
{ 

    $fetch = mysqli_query($db,"SELECT * FROM uni_labels where label_name like '%" . $_GET['term'] . "%'"); 

    /* Retrieve and store in array the results of the query.*/ 
    while ($row = mysqli_fetch_array($fetch, MYSQL_ASSOC)) { 

     $row_array['label'] = htmlspecialchars_decode($row['label_name']); 
     $row_array['lookupid'] = $row['id']; 
     $row_array['address'] = $row['label_address']; 
     $row_array['number'] = $row['label_number']; 
     $row_array['postalcode'] = $row['label_postalCode']; 
     $row_array['country'] = $row['label_country']; 

     array_push($return_arr,$row_array); 
    } 
} 
/* Free connection resources. */ 
mysqli_close($db); 

/* Toss back results as json encoded array. */ 
echo json_encode($return_arr); 

我的页面retreives的数据是这样的：

$(function() { 
     $("#step1Name").autocomplete({ 
      source: "/pages/form-lookup.php?country=dk", 
      minLength: 2, 
      select: function(event, ui) 
      { 
       $('#step1Name').val(ui.item.address); 
       $('#lookupid').val(ui.item.lookupid); 
       $('#vej').val(ui.item.address); 
      } 
     }); 
    }); 
<input maxlength="100" type="text" required="required" class="form-control input-lg" name="step1Name" id="step1Name" /> 

Everyting工作得很好，但我会就像我的下拉列表中显示$ row_array ['label']和$ row_array ['address']一样，当我在下拉列表中选择一个值时，输入框将只输出$ row_array ['label']值。

在数据文件中我试图将地址添加到标签，就像这样：

$row_array['label'] = htmlspecialchars_decode($row['label_name'])." - ".$row['label_address']; 

这显示在下拉值细下来，但选择的选择时，当然输入框包含太多的数据，我只希望它显示label_name。

有人能指出我正确的方向吗？

在此先感谢。

Answer 1

添加到您的自动完成代码：

select: function(event, ui) { 
    event.preventDefault(); 
    var name = ui.item.value.split('-')[0]; 
    $("#starter").val(name); 
}, 
focus: function(event, ui) { 
    return false; 
} 

所以更新的自动完成代码将是这样的：

$("#step1Name").autocomplete({ 
    source: "/pages/form-lookup.php?country=dk", 
    minLength: 2, 
    select: function(event, ui) { 
     event.preventDefault(); 
     var name = ui.item.value.split('-')[0]; 
     $("#starter").val(name); 
     return false; 
    }, 
    focus: function(event, ui) { 
     return false; 
    } 
});