Question

嘿，有一个小问题，当我点击其中一个选项时，我的下拉列表会失去焦点。我想在点击下拉列表时提交表单;这是我的代码：

    $(function() {

            var availableTags = [
                "Thing",
                "Thing2",
                "Thing3"];

            $( "#searchbox" ).autocomplete({
                source: availableTags
            });

    });

我想做的是在从自动完成中选择其中一个下拉列表时提交我的表单。

修改

忘记我的HTML：

<form action="" method="POST" id="search" accept-charset="UTF-8">
        <input id='searchbox' class='ui-widget' type='text' name="search" size="30" />
        <button type="submit"/>Search</button>

      </form>

EDIT2： 而我的AJAX帖子功能虽然不是真的相关：

$("#search").submit(function(event) {
    /* Stop form from submitting normally */
    event.preventDefault();
    /* Clear result div*/
    $("#result").html('');
    /* Get some values from elements on the page: */
    var values = $(this).serialize();
    /* Send the data using post and put the results in a div */
    $.ajax({
            url: "ajax/search.inc.php",
            type: "post",
            data: values,
            dataType: "text",
            success: function(data) {
                $("#result").html(data);
            }
    });
});

EDIT3： 谢谢Ehsan，我的结果： $（function（）{

            var availableTags = [
                "my php for tags"];

                    $( "#searchbox" ).autocomplete({
            source: availableTags,
            select: function(event, ui) 
            {
            $("#search").submit();
            }
        });

    });

EDIT4： 啊问题是它发布了表单，但只发布了查询类型而不是自动完成：/。即。我输入＆＃34; T＆＃34;并点击＆＃34; T100＆＃34;它只发布＆＃34; T＆＃34;。

EDIT5： 感谢AndrewPolland解决我的最新问题：

$( "#searchbox" ).autocomplete({
    source: availableTags,
    select: function (event, ui) {
        $("#searchbox").val(ui.item.value);
        $("#search").submit();
    }
});

Answer 1

您必须使用自动填充的select属性，当用户从自动填充中选择一个选项时，会触发其功能：

$( "#searchbox" ).autocomplete({
                source: availableTags,
                select: function(event, ui) 
                {
                $("form").submit();
                }
            });

UPDATE：

以表格形式隐藏字段：

<form action="" method="POST" id="search" accept-charset="UTF-8">
        <input type="hidden" id="selectedValue"/>
        <input id='searchbox' class='ui-widget' type='text' name="search" size="30" />
        <button type="submit"/>Search</button>

      </form>

将其值设置为像这样选择并发布表单：

$( "#searchbox" ).autocomplete({
                    source: availableTags,
                    select: function(event, ui) 
                    {
                    $('#selectedValue').val(ui.item.value);
                    $("form").submit();
                    }
                });

Answer 2

目前使用非常相似的东西。您可以在自动填充设置中使用select，然后使用submit()提交表单。

E.g。

$( "#searchbox" ).autocomplete({
    source: availableTags,
    select: function (event, ui) {
        $("#search").submit();
    }
});

查看问题的更新。您还可以将ajax提交代码移动到单独的函数中，并在选择选项时调用它。以上可能是最好的选择。

E.g。

function formSubmit(){
    /* Clear result div*/
    $("#result").html('');
    /* Get some values from elements on the page: */
    var values = $(this).serialize();
    /* Send the data using post and put the results in a div */
    $.ajax({
        url: "ajax/search.inc.php",
        type: "post",
        data: values,
        dataType: "text",
        success: function(data) {
            $("#result").html(data);
        }
    });
}

$( "#searchbox" ).autocomplete({
    source: availableTags,
    select: function (event, ui) {
        formSubmit();
    }
});

$("#search").submit(function(event) {
    /* Stop form from submitting normally */
    event.preventDefault();
    formSubmit();
});

正如我所说，第一种选择可能是最好的选择。只是包含这个以防万一它更适合您的情况。

解决您的“Edit4”问题。请尝试以下方法：

$( "#searchbox" ).autocomplete({
    source: availableTags,
    select: function (event, ui) {
        $("#searchbox").val(ui.item.value);
        $("#search").submit();
    }
});

从jquery的自动填充中发布表单

2 个答案:

UPDATE：