0

我有一个使用 jQuery 自动完成功能的 Web 应用程序。在我的网页上，我有几个文本框，其中附加了自动完成类，在它们下方是空的 div，用于附加自动完成结果。目前，无论我输入哪个文本框，它都会附加到第一个文本框下的 div 中。我如何将它附加到我正在输入的框下方的那个？

jQuery代码：

<script type="text/javascript">
$(document).ready(function () {
$("input.autocomplete").autocomplete({
    appendTo: '.container',
    source: function (request, response) {
        $.ajax({
            url: '/Home/GetUsers',
            type: "POST",
            dataType: "json",
            data: { query: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item, value: item };
                }));
            }
        })  ;
    }
});
})
</script>

HTML（总共有 18 个文本框，但我觉得这足以说明我在做什么）：

Employee Name (Team Leader): <input type ="text" name="empName1" class="autocomplete"/>
    <div class ="container"></div>
    <br/>
    <br/>
    Employee Name (Event Process Owner): <input type ="text" name="empName2" class="autocomplete"/>
    <div class ="container"></div>
    <br/>
    <br/>
    Employee Name (Sponsor): <input type ="text" name="sponsor" class="autocomplete"/>
    <div class ="container"></div>
    <br/>
    <br/>
    Employee Name: <input type ="text" name="empName3" class="autocomplete"/>
    <div class ="container"></div>
    Employee Name: <input type ="text" name="empName4" class="autocomplete"/>
    <div class ="container"></div>
4

6 回答 6

4

工作演示：http: //jsfiddle.net/mohammadAdil/muwxt/

$('input').each(function () {
    $(this).autocomplete({
        search: function (event, ui) {
            $(this).next('.container').empty();
        },
        source: function (request, response) {
            $.ajax({
                 url: '/Home/GetUsers',
                 type: "POST",
                 dataType: "json",
                 data: { query: request.term },
                 success: function (data) {
                       response($.map(data, function (item) {
                            return { label: item, value: item };
                         })
                       );
                 }  
            });
        }
    }).data('autocomplete')._renderItem = function (ul, item) {

        return $('<li/>')
            .data('item.autocomplete', item)
            .append(item.value)
            .appendTo($(this.element).next('.container'));
    };
});
于 2013-04-17T13:59:22.297 回答
0

我不知道您是否可以更改 HTML，但这会起作用：

HTML（用于第一个自动完成框）

Employee Name (Team Leader): <input type ="text" name="empName1" class="autocomplete"/>
<div class ="empName1 container"></div>

JS

$("input.autocomplete").autocomplete({
    appendTo: '.container.' + $(this).attr('name'),

您还应该将此添加到您的 ajax 调用中：

error: function() { response(""); }

因为，正如自动完成 API 文档中所说

即使遇到错误，您也必须始终调用响应回调。这确保了小部件始终具有正确的状态。

于 2013-05-01T20:04:30.973 回答
0

我认为我的解决方案会减慢加载速度，但可以工作（我希望）。

首先为您添加.container一个 id，但不要删除该类。

然后使用每个：

$('.autocomplet').each(function(){
    var target = $(this)
    target.autocomplete({
        appendTo: getcontainer(target),
        source: function (request, response) {
        $.ajax({
            url: '/Home/GetUsers',
            type: "POST",
            dataType: "json",
            data: { query: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item, value: item };
                }));
            }
        })  ;
    }
})

为了不丢失目标的引用，我们将其保存在 var 中。Append 只接受选择器，所以我们创建了一个返回选择器的函数：

function getContainer(target){
    var selectedID = target.next('.container').attr('id');
    return '#'+selectedID;
}
于 2013-05-01T20:24:18.410 回答
0

在 ajax 调用的成功函数中，您可以使用 jquery 模板（google jquery.tmpl）将 html 附加到某些 div，同时考虑到发件人来决定要转到哪个 div。我自己也遇到了这个问题，这个解决方案工作得很好.

于 2013-05-03T15:38:04.160 回答
0

自动完成结果附加在正确的 div 中。只是将一个文本字段和一个 div 包装在一起。:演示

JQuery：稍微修改了 jquery 部分，如下-

$(document).ready(function () {

var availableTags = [
  "ActionScript",      "AppleScript",      "Asp",      "BASIC",      "C",      "C++",
  "Clojure",      "COBOL",      "ColdFusion",      "Erlang",      "Fortran",      "Groovy",
  "Haskell",      "Java",      "JavaScript",      "Lisp",      "Perl",      "PHP",
  "Python",      "Ruby",      "Scala",      "Scheme"
];

try{

    $(".autocomplete").each(function(){
        $(this).autocomplete({
search: function (event, ui) {
        $(this).parent().find('.container').empty();
    },
source: availableTags,
}).data('autocomplete')._renderItem = function(div, item) {

return $('<li/>')
   .data('item.autocomplete', item)
   .append(item.value)
.appendTo($(':focus').parent().find('.container'));
};
})
}
catch(e){alert(e)}  })
于 2013-05-04T15:24:59.153 回答
0

我认为问题出在appendTo选项上。尝试以下

$(document).ready(function () {
    $("input.autocomplete").each(function () {
        var $this = $(this),
            name = $this.attr('name');
        $this.autocomplete({
            appendTo: 'input[name=' + name + '] + .container',
            source: function (request, response) {
                $.ajax({
                    url: '/Home/GetUsers',
                    type: "POST",
                    dataType: "json",
                    data: { query: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item, value: item };
                        }));
                    }
                });
            }
        });
    });
});
于 2013-05-06T04:56:22.170 回答