Question

我在jQuery作为来源的文字字段中使用autocomplete()的{{1}}方法：

Object.getOwnPropertyNames(projects)

$(function() { $("#project").autocomplete({source: Object.getOwnPropertyNames(projects)}); }方法返回Object.getOwnPropertyNames(projects)对象属性名称的数组。

这很好用。但是：

如果用户在字段中输入新值（即，某个值不是projects对象的属性），则在单击按钮时该值将作为属性添加（页面）没有重新加载）。按钮单击也会重置该字段。当我现在尝试在字段中输入值时，建议列表不会显示新添加的属性（除非我再次调用projects方法）。我该如何解决这个问题？

嘘。如果我将autocomplete的值分配给数组，请使用数组作为自动完成方法中的源，并在按钮单击时更新数组，然后建议列表显示新添加的值。

以下功能处理按钮单击：

Object.getOwnPropertyNames(projects)

Answer 1

在source更新后尝试更新自动填充的localArr选项：

$("#project").autocomplete("option", "source", localArr);

Answer 2

提交表单后，您的页面会刷新，因此javascript代码会再次运行，您的javascript代码所说的是使用来自给定源的元素自动完成输入字段。您必须确保您的源现在包含用户刚刚添加的新项目。

PHP示例：

<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
var projects;
 jQuery(function() {
    projects = {project1: 1, project2: 2, project3: 3, project4: 4};
    <?php if (isset($_GET['project'])): ?>
        projects['<?php echo $_GET['project']?>'] = 'foobar';
    <?php endif ?>
    jQuery("[name=project]").autocomplete({source: Object.getOwnPropertyNames(projects)});
});
</script>
</head>
<body>
<form action="">
   Project: <input type="text" name="project" value="<?php echo isset($_GET['project']) ? $_GET['project'] : ""?>"><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

Answer 3

正如@mimarcel指出的那样，$("#project").autocomplete({source: Object.getOwnPropertyNames(projects)});只创建了一个在更新projects对象时不会改变的数组。为了使建议列表反映对象的更改，我不得不使用回调，如下所示：

$('#project').autocomplete({
    source: function(request, response){
        response(Object.getOwnPropertyNames(projects));
    }
});

自动完成功能不会检测源对象的更改

3 个答案: