jQuery autocomplete _renderItem问题,带有多个输入以触发自动完成

时间:2012-07-10 14:35:40

标签: jquery autocomplete

快速解释:我有3个输入 first_name last_name contact_number 。他们都有班级名称自动完成。例如

<input type="input" name="first_name" id="first_name" class="autocomplete">
<input type="input" name="last_name" id="last_name" class="autocomplete">
<input type="input" name="contact_number" id="contact_number" class="autocomplete">

我使用autocomplete类作为启动jQuery UI自动完成功能的选择器(参见下面的代码),这样填写其中任何一个都将导致使用所有3个输入进行ajax搜索。因为我使用所有3个字段进行搜索,结果必须在特定的位置(通常情况下不在每个输入下)所以我使用带有表格的div,然后在其中显示结果。这可以通过覆盖内部_renderItem函数来实现(参见下面的代码)。

然而,这一切都完美无缺,仅适用于表格中的第一个输入,例如名字。其他输入都显示在各自输入下方的下拉列表中。对于后续输入,似乎忽略_renderItem覆盖。我尝试在输入中进行交换,无论哪个首先正常工作,其他人都没有。有关如何修复行为的任何建议吗?

    $(document).ready(function() {
        $(".autocomplete").autocomplete({
            search: function(event, ui) {
                $("#autocompleteoutput table tbody").empty();
                $("#autocompleteoutput").css("display", "inline");
            },
            source: function(request, response) {
                jQuery.ajax({
                    url: "'.site_url('reservations/search_customer').'",
                    type: "post",
                    dataType: "json",
                    data: {
                        first_name: $("#first_name").val(),
                        last_name: $("#last_name").val(),
                        contact_number: $("#contact_number").val(),
                        '.$this->security->get_csrf_token_name().' : "'.$this->security->get_csrf_hash().'"
                    },
                    success: function(data) {
                        response(jQuery.map(data, function(item) {
                            return {
                                diner_id: item.diner_id,
                                first_name: item.first_name,
                                last_name: item.last_name,
                                dialing_code: item.dialing_code,
                                country_id: item.country_id,
                                contact_number: item.contact_number,
                                email: item.email
                            }
                        }))
                    }
                })
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<tr class=\"customerselect\" data-dinerid=\"" + item.diner_id + "\" data-fname=\"" + item.first_name + "\" data-lname=\"" + item.last_name + "\" data-countryid=\"" + item.country_id + "\" data-num=\"" + item.contact_number + "\" data-email=\"" + item.email + "\"></tr>" )
                .data( "item.autocomplete", item )
                .append( "<td><span class=\"icon-user\">" + item.first_name + " " + item.last_name + "</span></td>")
                .append( "<td><span class=\"icon-phone\">(+" + item.dialing_code + ") " + item.contact_number + "</span></td>" )
                .append( "<td><span class=\"icon-mail\">" + item.email + "</span></td>" )
                .appendTo($("#autocompleteoutput table tbody"));
        };
    });

5 个答案:

答案 0 :(得分:12)

此处的.data(“自动填充”)仅返回第一个元素的自动填充数据。在分配自动完成控件后,请尝试为每个输入单独使用此方法。

我的意思是这样的

 function myRenderFunc(ul,item){
     // code for the _renderItem method
 }

 $(".autocomplete").autocomplete({
        //your autocomplete code
 })

 $('#first_name').data( "autocomplete" )._renderItem = myRenderFunc;
 $('#last_name').data( "autocomplete" )._renderItem = myRenderFunc;
 $('#contact_number').data( "autocomplete" )._renderItem = myRenderFunc;

我现在尝试了这个,它对我有用。也应该适合你。

答案 1 :(得分:10)

这对我也有用,特别是如果动态生成输入元素:

$('.autocomplete').each(function() {
    $(this).data('uiAutocomplete')._renderItem = function (ul, item) {
          // render item code
    };
});

答案 2 :(得分:7)

上述两个答案都指向了正确的方向,但最后,对我来说,它看起来像这样(包括对jquery-ui的一些更新):

$('.autocomplete').each(function(i, el) {
    $(el).data('ui-autocomplete')._renderItem = function(ul, item) {
        // Do stuff
    };
});

答案 3 :(得分:0)

谢谢你解决了我的问题。我是通过&#39;创建&#39;来实现的。功能

$.extend(proto, {
    _initSource: function () {
        if (this.options.html && $.isArray(this.options.source)) {
            this.source = function (request, response) {
                response(filter(this.options.source, request.term));
            };
        } else {
            initSource.call(this);
        }
    },

    create: function () {
        $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append($("<a></a>")[this.options.html ? "html" : "text"](item.EmployeeHtml))
                .appendTo(ul);
    };
}

答案 4 :(得分:0)

$('.autocomplete').each(function(i, el) {
    $(el).autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "/Actual/Provision",
                type: 'POST',
                dataType: "json",
                data: {'term': request.term},
                success: function(data) {
                    response(data);
                },
                error: function(data) {
                    alert('failed to load autocomplete source data');
                }
            });
        },
        minLength: 1,
        select: function(event, ui) {
            $(this).parent().find("input[name='submission_provision[]']").val(ui.item.name);
            $(this).parent().find("input[name='submission_part_age[]']").val(ui.item.part_age);
            $(this).parent().find("input[name='submission_part_smr[]']").val(ui.item.part_smr);
            $(this).parent().find("input[name='submission_labour_age[]']").val(ui.item.labour_age);
            $(this).parent().find("input[name='submission_labour_smr[]']").val(ui.item.labour_smr);

            return false;
        },
        change: function(event, ui) {
            if ($(this).val() == '') {
                $(this).parent().find(".provision-ref").val("");
            }
        }

    }).data("ui-autocomplete")._renderItem = function(ul, item) {
        console.log(ul);
        return $("<li>")
            .append("<a>" + item.name + "</a>")
            .appendTo(ul);
    };
});