jqueryUI autocomplete和datalist在一起

Question

我有一个带有单个输入的html搜索表单。在输入字段中，用户可以写三个不同的东西：区域名称，旅行名称，其他关键字。

null

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

提前感谢Chaim

Answer 1

不幸的是，对DataList的支持充其量仍然很平庸，而且没有专门针对该元素的事件。最好的选择是将它绑定到的输入值与DataList中的可用选项进行比较。如果找到匹配项，您可以使用该信息转到区域url，而不是提交表单。

您已经使用了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>