Question

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

区域不在数据库中，所以我只有一个数据主义字段（HTML）挂钩到我的输入，自动填充用户的区域名称。
treks来自数据库，所以我让JqueryUI自动完成从服务器加载名称，当用户选择名称时，站点将他发送到右页。
当用户填写任何其他内容并按搜索时，表单会将他发送到搜索页面，并显示正确的结果。

我的问题是：

如果用户从列表中选择区域名称，我希望搜索将用户发送到区域页面。 jquery autocomplete具有select prop。 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
        });
    }
});

提前致谢哈伊姆

Answer 1

不幸的是，对datalist的支持充其量只是平庸，并且没有具体的事件。您最好的选择是将其绑定的输入值与数据列表中的可用选项进行比较。如果找到匹配项，您可以使用该信息转到区域网址，而不是提交表单。

你已经使用了jQuery，所以我写了一个快速的解决方案：

＆＃13;

$('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);
        
    }
});

＆＃13;

<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>

＆＃13;

在提交时，将检查输入中的值是否与datalist选项的值完全匹配。如果是这样，它将显示警告（用你选择的功能替换它），否则它只会提交表格。

jqueryUI自动完成和datalist在一起

1 个答案: