jqueryUI自動完成和datalist在一起

我有一個單一的輸入html搜索表單。在輸入欄中用戶可以寫出三樣不同的東西：區域名稱，跋涉名稱，其他關鍵字。jqueryUI自動完成和datalist在一起

地區不在數據庫中，所以我只是有一個數據列表字段（HTML）掛鉤到我的輸入，它自動完成用戶的地區名稱。
遷徙是從數據庫，所以我有JqueryUI自動完成從服務器加載名稱，並且當用戶選擇名稱時，網站將他發送到正確的頁面。
當用戶填寫其他內容並按搜索表單將他發送到搜索頁面並獲得正確結果。

我的問題是：

我要搜索到，如果用戶選擇列表中的區域名稱的用戶發送到區域頁面。 jquery自動完成具有選擇道具。datalist有類似的東西嗎？也許有一個選項，自動完成將從兩個不同的資源加載？（一個客戶端和一個服務器）

<form action="" method="get"> 
    <input class="auto" name="desc" list="areas" /> 
    <button type="submit">seatch</button> 
    <datalist id="areas"> 
     <option id="area1" value="area1" >1</option> 
     <option id="area2" value="area2" >2</option> 
     <option id="area2" value="area2" >2</option> 
    </datalist> 
</form>

腳本：

$('.auto').autocomplete({ 
    source:"php/autocomplete.php", 
    minLength:1, 
    select: function(event,ui){ 
     changePage('content/trek.php', { 
      Trek_Id:ui.item.Trek_Id 
     }); 
    } 
});

在此先感謝哈伊姆

來源

2013-06-24 Chiptus

不幸的是，datalist的支持仍然是平庸的最好的，並沒有針對此不活動元素具體。您最好的選擇是比較綁定的輸入值和數據列表中的可用選項。如果找到匹配項，您可以使用該信息轉到區域網址，而不是提交表單。

你已經使用jQuery，所以我寫了一個快速的解決方案：

$('form').submit(function(e) { 
 
    var $input = $(this).find('input.auto'); 
 
     val = $input.val(); 
 
     list = $input.attr('list'), 
 
     match = $('#'+list + ' option').filter(function() { 
 
      return ($(this).val() === val); 
 
     }); 
 
    
 
    if(match.length > 0) { 
 
     e.preventDefault(); 
 

 
     var area = match.val();  
 
     alert('Navigate to ' + area); 
 
     
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" method="get"> 
 
    <input class="auto" name="desc" list="areas" /> 
 
    <button type="submit">seatch</button> 
 
    <datalist id="areas"> 
 
     <option id="area1" value="area1" >1</option> 
 
     <option id="area2" value="area3" >3</option> 
 
     <option id="area2" value="area2" >2</option> 
 
    </datalist> 
 
</form>

在提交此將檢查輸入的值數據列表選項的值完全匹配。如果是這樣，它會顯示一個警報（用你選擇的功能替換它），否則它只會提交表單。

來源

2015-04-22 11:39:15

jqueryUI自動完成和datalist在一起

回答

相關問題