1

有这个简单的表单，它发送get-request到服务器。

<form id="form0" method="get">
  <input id="searchTerm" type="hidden" name="searchTerm">
  <input type="search" id="userSearchTerm" />
  <input type="submit" value="submit" />
</form>

我使用 jquery-uiauto-complete从服务器获取 json 数据，是的，它工作正常。

<script type="text/javascript">
$(document).ready(function () {
    $("#userSearchTerm").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Home/AutoComplete",
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    alert("successfully got the data");
                    response($.map(data, function (item) {
                        return { name: item.name, value: item.age };
                    }))

                }
            })
        },
        select: function (e, ui) {
            alert(ui.item.name);
            $('#searchTerm').val(ui.item.name);
            $("#form0").submit();
        }


    });
    return false;
})

我收到诸如“成功获取数据”之类的警报消息以及“项目名称”。还检查了Network谷歌浏览器下的选项卡-> json 响应在那里。

问题是，我无法提交表单。如果我删除该行，$('#searchTerm').val(ui.item.name);则表单将被提交并且一切都很好。

有人能指出我正确的方向吗？为什么这个简单的 javascript 不运行？

4

3 回答 3

2

尝试将 ui.item.name 替换为ui.item.value之类的，

 select: function (e, ui) {
     alert(ui.item.value);
     $('#searchTerm').val(ui.item.value);
     $("#form0").submit();
 }

小提琴

于 2013-10-10T05:19:01.867 回答
1

试试这个：

$( "#tags" ).autocomplete({
        source: availableTags,
        select: function (e, ui) {
                alert(ui.item.value);
                $("#searchTerm").val(ui.item.value);
                $("#form0").submit();
            }
    });

DEMO FIDDLE

于 2013-10-10T05:30:39.540 回答
0

感谢@Unknown、@Rohan、@Mike、@Jatin，他们为我指明了正确的方向，感谢他们为 jfiddle 所做的努力。

所以，我学到了一些教训：是时候回答了"Why it did not work?"

嗯，答案是：

有一个id = SearchTerm"hidden"类型的输入字段，我试图在提交表单之前为其设置值。

我用过类似的东西，

 $("#searchTerm").value("TEST");

似乎浏览器不乐意告诉我，Object [object Object] has no method 'value'.

因此，将值设置为表单中的隐藏字段的正确方法jquery是使用以下内容：

$('input[name=searchTerm]').val(ui.item.name);

第二部分：

我的 JSON 对象是name and value pairs. 所以，通常我应该使用，

$('input[name=searchTerm]').val(ui.item.name); or $('input[name=searchTerm]').val(ui.item.value);

而不仅仅是$('input[name=searchTerm]').val(ui.item); //This is not sensible.

补充笔记：

您可以按 F12 调出开发者工具（如果安装了 firebug，则不会启动）。

导航到Console tab哪个会给您带来各种脚本错误。

导航到Network tab它会为您带来所有 JSON 请求。

于 2013-10-10T06:51:53.520 回答