使用jquery将值设置为隐藏字段在自动完成期间不起作用答案

【问题标题】：Set value to a hidden field using jquery not working during AutoComplete使用jquery将值设置为隐藏字段在自动完成期间不起作用
【发布时间】：2013-10-17 17:07:28
【问题描述】：

有一个简单的表单，它将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-ui auto-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 没有运行？

【问题讨论】：

您的 sort2 是在哪里定义的？还是从哪里来？
@Jatinpatil：感谢您的指出。这是一个错字。但是，仍然是同样的错误。
看起来一切都很好。你能用示例 json 创建fiddle 吗？
你必须传递这样的标签source: availableTags 而不是source: {availableTags}。工作正常。 jsfiddle.net/sNb86/4
你有错字。这不是$("searchTerm").value("test")。使用$("searchTerm").val("test") .jsfiddle.net/sNb86/7

标签： c# jquery html jquery-ui asp.net-mvc-4

【解决方案1】：

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

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

Fiddle

【讨论】：

【解决方案2】：

试试这个：

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

DEMO FIDDLE

【讨论】：

【解决方案3】：

感谢@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 请求。

【讨论】：