AutoComplete自动选择自动提交
AutoComplete自动选择自动提交
提问于 2015-04-11 15:50:53
<script type="text/javascript">
jQuery(document).ready(function() {
$("#search").autocomplete({
source:'/autocomplete.php',
minLength:3,
autoFocus: true,
delay: 100,
select: function(event, ui) {
$("#search").val(ui.item.label);
$("#searchForm").submit();
}
});
});
</script>
<form method="post" action="/reports/report.php" id="searchForm">
<input type="text" id="search" name="q" size="35" />
<input type="submit" name="submit" value="Search" />
</form>好吧，情况就是这样。这是AutoComplete的一个特例。autocomplete.php脚本进行精确搜索，只返回一个匹配项。它起作用了。我们想要的是它没有显示给最终用户。相反，表单将使用返回的匹配值自动提交。运气不好。显然，select:在这种情况下不起作用。需要自动选择返回的值，然后自动提交。有什么想法吗？
回答 1
Stack Overflow用户
发布于 2015-04-11 16:55:33
试着利用
响应(事件、ui )型:自动完成式 在搜索完成后，在显示菜单之前触发。在不需要自定义源选项回调的情况下，对于建议数据的本地操作非常有用。搜索完成时总是会触发此事件，即使由于没有结果或禁用了自动完成，也不会显示菜单。 事件 类型:事件 ui 类型:对象
- 内容类型:数组包含响应数据，可以修改以更改将要显示的结果。此数据已经规范化，因此如果您修改数据，请确保包括每个项的值和标签属性。
html
<div class="ui-widget">
<form method="post" action="/echo/json/" id="searchForm">
<input type="text" id="search" name="q" size="35" />
<input type="submit" name="submit" value="Search" />
</form>
</div>css
.ui-menu-item, .ui-helper-hidden-accessible {
display:none;
}js
jQuery(document).ready(function () {
var data = ["c++"
, "php"
, "coldfusion"
, "javascript"
, "asp"
, "ruby"
];
var elem = $("#search");
elem.autocomplete({
autoFocus:true,
delay:100,
minLength: 3,
source: data,
response: function (event, ui) {
console.log(event, ui.content[0]);
var form = $(this).parent("form");
$.post(form.attr("action")
, {json:JSON.stringify({"q" : ui.content[0].value})}, "json")
.then(function(data) {
console.log("post response:", data)
}, function(jqxhr, textStatus, errorThrown) {
console.log(errorThrown)
})
}
});
$("input[type=submit]").on("click", function(e) {
e.preventDefault();
});
});jsfiddle http://jsfiddle.net/x1h8cjLk/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29579822
复制相关文章
相似问题
腾讯云开发者
