datalist：在輸入文本框中顯示與查詢匹配的選項

我有一個用於編輯現有數據的表單。用戶選擇一條記錄，然後表單由數據庫查詢預填充。一些表單字段以數據列表的形式呈現（允許預先填充的選項，但用戶可以自行輸入）。datalist：在輸入文本框中顯示與查詢匹配的選項

我想要做的是讓這些datalist元素出現與該鍵（分貝）的電流值在datalist上面的文本框中顯示 - 即以同樣的方式，一個<option>值可以是匹配<select>輸入中的選項，並在渲染時在<select>框中顯示該選項。

我已經添加selected選項列表如下：

<input type="search" 
    name="Status" 
    placeholder = "~ Status ~" 
    id="Status" 
    list="statuslist"> 

<datalist id="statuslist"> 
    <select> 
     <option value="launched">launched</option> 
     <option value="pre-launch" selected>pre-launch</option> 
     <option value="no company">no company</option> 
    </select> 
</datalist>

...但是，這似乎並沒有這樣的伎倆。 datalist輸入框始終顯示~ Status ~（佔位符）。如果我刪除佔位符，它只是空白。

datalist是否支持這種功能？我如何做到這一點？

來源

2015-09-20 globalSchmidt

您能告訴我們您的相關javascript/jquery代碼嗎？ – turbopipp

我正在使用datalist.js插件。所以唯一的jquery是加載datalist.js在，然後聲明'$（'input [list]'）。datalist（）;'在末尾 – globalSchmidt

編輯nevermind我的選擇器評論，我看到現在針對列表是正確的。 – turbopipp

datalist.js犯規更新與選擇的價值，你有DataList控件初始化後

//traverse each list 
$('input[list]').each(function(){ 
    // variable for the jquery object of the selected option 
    var datalist = $('#' + $(this).attr('list') + ' option:selected'); 
    // check if value, but also check if option has the attribute "selected" 
    if(datalist.val() != 'undefined' && datalist.attr('selected')){ 
     // update selected to the pre-selected 
     $(this).attr('value',datalist.text()); 
    } 
});

updated jsfiddle

編輯補充一點：按要求，固定誤差，增加了多表支持datalist.js後備解決方案，以避免在未選中時覆蓋佔位符。

來源

2015-09-20 18:23:49 turbopipp

這工作！現在只需要將其通用化，以便它是所有數據輸入的默認行爲。對此有何想法？ – globalSchmidt

Yepp，'.each（）'很好，更新了我的答案。（編輯：順便說一句'focus（）'不是必要的，datalist.js似乎重新填充模糊/焦點的列表，當有多個列表） – turbopipp

輝煌。只有一個小怪癖......當特定datalist沒有從db返回的值時，沒有「selected」選項，但此代碼現在在datalist中顯示第一個選項，而不是佔位符。 – globalSchmidt

datalist：在輸入文本框中顯示與查詢匹配的選項

回答

相關問題