Question

<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脚本执行精确搜索以仅返回一个匹配项。有用。我们想要的是它不会显示给最终用户。而是使用返回的匹配值自动提交表单。没有运气。显然，选择：在这种情况下不起作用。需要自动选择返回的值，然后自动提交。有什么想法吗？

Answer 1

尝试使用

response( event, ui )输入：autocompleteresponse

搜索完成后，在显示菜单之前触发。有用   用于本地操作建议数据，其中包含自定义源   选项回调不是必需的。当a时总是触发此事件   搜索完成，即使菜单不会显示，因为有   没有结果或禁用自动填充功能。

<强>事件

输入：事件

ui

类型：对象


内容类型：Array包含响应数据，可以是   已修改以更改将显示的结果。这个数据是   已经规范化，因此如果您修改数据，请确保包含   每个项目的值和标签属性。

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/

自动完成自动选择自动提交

1 个答案: