javascript - jQuery UI 对多个输入元素具有相同的自动完成功能？

Question

页面有许多 input 字段，它们以网格形式排列。第一列是一个文本字段，我想在其中使用 jQueryUI 的自动完成功能查找位置名称。它在单个元素上运行良好；使用 getElementsByName(或标记或类)返回正确数量的元素。但是，自动完成不起作用。我读过How to link jQuery UI autocomplete to several input elements?但不明白如何将它应用到我的代码中。

CSHTML:

@for (int i = 0; i < Model.Count; i++)
{
    <tr>
        <td><input type="text" name="LocationStr" value="@Model[i].LocationStr" class="form-control" /></td>
[etc]

<script type="text/javascript">
    $(document).ready(
        function () {
            var allElements = document.getElementsByName("LocationStr");
            for (i = 0; i < allElements.length; i++) {
                allElements[i].autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: "/Wtt/AutoCompleteLocation",
                            dataType: "json",
                            data: {
                                term: request.term,
                                locationSetId: $("#LocationSetId").val()
                            },
                            success: function (data) {
                                response(data);
                            }
                        });
                    },
                    min_length: 3,
                    delay: 300
                });
            }
        });
</script>

我假设是这一行是罪魁祸首。在具有单个元素的另一个页面上它工作正常:

$('#LocationStr').autocomplete({
[etc]

但这似乎不起作用(元素数组):

allElements[i].autocomplete({
[etc]

再次注意，allElements 确实包含预期数量的条目。浏览器调试器中没有运行时错误，并且 for() 循环执行了预期的次数。

Answer 1

autocomplete 是一个 jQuery 扩展，因此您不能直接在 HTML 元素中使用它。

改为这样做:

$(allElements[i]).autocomplete({

或者更好:

 $('[name=LocationStr]').each(function(){
    $(this).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Wtt/AutoCompleteLocation",
                dataType: "json",
                data: {
                    term: request.term,
                    locationSetId: $("#LocationSetId").val()
                },
                success: function (data) {
                    response(data);
                }
            });
        },
        min_length: 3,
        delay: 300
    });
});