jQuery UI自動完成在列表中顯示結果，但是當選擇時，打印值而不是標籤

我在自動完成工作時遇到了很多問題。首先，我有一個驗證不兼容的問題，因爲我使用的是jQuery Validation和jQuery 1.5，並且打破了Autocomplete小部件上的AJAX功能。這已經解決了，現在我的PHP控制器返回給我一個帶有標籤/值的JSON結果。當然，標籤是我想展示的名稱，價值是我需要提交的價值。jQuery UI自動完成在列表中顯示結果，但是當選擇時，打印值而不是標籤

我正在使用PHP的示例JSON輸出，僅用於測試而不是用於現在搜索。這是我送回來時，我讓AJAX請求：

[{"label":"Client example","value":1},{"label":"Lorem Ipsum","value":2},{"label":"Microsoft","value":3}]

而使用下一個代碼，我認爲，這將讓我直接在標籤並提交ID。當我開始輸入時，我在列表客戶端例子，Lorem Ipsum和Microsoft中看到我想要的結果，但是當我選擇它們時，列表被關閉，輸入顯示值而不是標籤。

$("#clientid").autocomplete({ 
    source: function(request, response) { 
     $("#ajax-loader").fadeIn('normal'); 

     $.ajax({ 
      url: BASE_URL + 'projects/ajax/get_clients', 
      data: request, 
      dataType: "json", 
      type: "POST", 
      success: function(data) { 
       response(data); 
      } 
     }); 

     $("#ajax-loader").fadeOut("normal"); 
    }, 
    minLength: 2 
});

我也試過了@ 3nigma建議我時，我一直在尋找爲什麼自動完成故障代碼：

success: function(data) { 
    response($.map(data, function(item) { 
     return { 
      label: item.label, 
      value: item.value 
     } 
    })); 
}

並沒有什麼。展望對jQuery UI的網站和谷歌的例子，似乎選擇了做這件事情，所以我嘗試：

select: function(event, ui) { 
    $("#clientid").val(ui.item.label); 
}

但不工作也一樣，我看到在<input />值。

我不知道我可以嘗試更多。我如何解決這個問題？

預先感謝您！

來源

2011-02-16 udexter

看出：http://stackoverflow.com/questions/6716266/jquery-autocomplete-categories-select-label-and-value – 2012-03-08 00:31:57

單個<輸入/ >只能存儲一個沒有任何標籤的值。

<input type="text" value="Lorem Ipsum" name="myInput">

自動完成只是簡單地設置輸入的值屬性，這與您在輸入值中輸入的值完全相同。不可能直接在輸入中顯示與其值不同的標籤。

您需要調整您的數據源的返回值相同的標籤

[{"label":"Client example","value":"Client example"}...

，但你會失去你的價值。處理提交的表單時，您可以使用標籤檢索值，假定標籤是唯一的。

來源

2011-02-16 09:43:26 filip

所以...我有做隱藏的輸入存儲的ID？它不會是唯一的;-( – udexter 2011-02-16 10:46:43

我能夠在select：和focus：函數中使用2個額外的代碼行來完成此操作。

你的情況

添加這些

select: function(event, ui) { 
    event.preventDefault(); 
    $("#clientid").val(ui.item.label); 
    }, 
    focus: function(event, ui) { 
    event.preventDefault(); 
    $("#clientid").val(ui.item.label); 
    }

來源

2013-09-11 21:53:47 vjnexus

jQuery UI自動完成在列表中顯示結果，但是當選擇時，打印值而不是標籤

回答

相關問題