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