3

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

  • 区域不在数据库中，所以我只有一个数据列表字段 (HTML) 连接到我的输入，它会自动完成用户的区域名称。
  • 跋涉来自数据库，所以我让 JqueryUI 自动完成从服务器加载名称，当用户选择名称时，站点将他发送到正确的页面。
  • 当用户填写任何其他内容并按搜索时，表单会将他发送到具有正确结果的搜索页面。

我的问题是：

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

提前致谢

4

1 回答 1

0

不幸的是，对的支持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>

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

于 2015-04-22T11:39:15.707 回答