我在我的一个应用程序中使用Ajax Autocomplete for Jquery(http://www.devbridge.com/projects/autocomplete/jquery/)。搜索表单如下所示:
Ajax Autocomplete for Jquery
<form id="topsearch" method="POST" action="/searchAll"><input type="text" class="searchform" name="q" id="q" value="Country, City, Hotel or a Tourist Attraction" o nfocus="clearInput(this);" onblur="defaultInput(this);" /> <select id="top_search_select" name="entity_type"> <option value="country">Countries</option> <option value="city">Cities</option> <option value="place" selected="selected">Tourist Attractions</option> <option value="hotel">Hotels</option> </select> <input type="submit" name="topsearch" class="submit" value="SEARCH" title="SEARCH"/> </form>
自动完成配置如下所示:
<script type="text/javascript"> //<![CDATA[ var a = $('#q').autocomplete({ serviceUrl:'/search', delimiter: /(,|;)\s*/, // regex or character maxHeight:400, width:325, zIndex: 9999, params: {entity_type:$('#top_search_select').val()}, deferRequestBy: 0, //miliseconds noCache: false, //default is false, set to true to disable caching onSelect: function(value, data){window.location.replace(data);}, }); //]]> </script>
现在问题出在后端,我有不同的处理程序,可为用户通过表单中的select选项选择的不同类型的实体生成结果。
默认entity_type情况下place,它可以很好地传递给后端中的处理程序。但是,我想要的是当一个人从params: {entity_type:$('#top_search_select').val()}脚本配置表单中的选择框中选择一个不同的实体时也会被更新。
entity_type
place
params: {entity_type:$('#top_search_select').val()}
任何帮助或想法将不胜感激。谢谢。
尽管我们需要在selects change方法上调用setOptions方法,但该方法仍然有效。因此,将脚本更改为:
<script type="text/javascript"> //<![CDATA[ var a = $('#q').autocomplete({ serviceUrl:'/search', delimiter: /(,|;)\s*/, // regex or character maxHeight:400, width:325, zIndex: 9999, params: {entity_type:$('#top_search_select').val()}, deferRequestBy: 0, //miliseconds noCache: false, //default is false, set to true to disable caching onSelect: function(value, data){window.location.replace(data);}, }); a.setOptions({params:{entity_type:$('#top_search_select').val()}}); //]]> </script>
和在文档就绪功能上添加以下内容:
$("#top_search_select").change(function() { a.setOptions({params:{entity_type:$('#top_search_select').val()}}); });