jquery自动完成自定义数据和显示

时间:2013-10-23 13:43:38

标签: jquery jquery-autocomplete custom-data-attribute

我正在处理jquery自动完成自定义数据和显示。我无法弄清楚如何让返回的数据显示为每个项目的两行。标签和值以及自动完成都在工作,但格式化数据是我需要帮助的地方。我已经检查了firefox并且item.vcCCQualtsCustomTitle有数据。当我尝试使用.data时,item.desc似乎没有正确连线,因为它没有显示数据(我在成功时映射)

这是代码

$(function () {
$(".cClassID").click(function () {//fires off when you click on the textbox, that the entire textbox gets selected so you don't have to backspace stuff out
    $(this).focus();
    $(this).select();
});
$(".cClassID").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/GeneralUserControls/wsClassIndex.aspx/_ClassIndexSearch_TestOnly",
            data: "{ 'ClassIndex': '" + request.term + "' }",//Parm name and what is in the textbox passed in
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                response($.map(data.d, function (item) {
                    return {
                        label: item.ClassTitle, //map properties used in class returned by JSON to what autocomplete wants
                        value: item.tblClassIndexID,
                        desc: item.vcCCQualtsCustomTitle
                    }
                }))
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    },
    minLength: 3,
    select://fires off when you make a selection
        function (event, ui) {
            //$("#ctl00_ContentPlaceHolder1_ucClassIndex_txtClassIndex").val(ui.item.label);
            //$("#ctl00_ContentPlaceHolder1_ucClassIndex_hfClassIndexID").val(ui.item.value);
            $("[id$=txtClassIndex]").val(ui.item.label);
            $("[id$=hfClassIndexID]").val(ui.item.value);
            $("#project-description").html(ui.item.desc);
            //AppChanged(ui.item.value);//if JaxIt is not there..there is no error.. it just never runs

            return false;
        },
    focus: function (event, ui) {//what populates the drop down
        //$("#ctl00_ContentPlaceHolder1_ucClassIndex_txtClassIndex").val(ui.item.label);
        //$("#ctl00_ContentPlaceHolder1_ucClassIndex_hfClassIndexID").val(ui.item.value);
        $("[id$=txtClassIndex]").val(ui.item.label);
        $("[id$=hfClassIndexID]").val(ui.item.value);

        return false;
    },
}).data('autocomplete')._renderItem = function (ul, item) {
    return $('<li></li>')
        .data('item.autocomplete', item)
        .append(item.name + item.desc)
        .appendTo(ul);
};

});

我不知道我是否需要$(“#project-description”)。html(ui.item.desc);在选择中:我在其中的一个例子中看到了它,所以它留在那里。任何有关如何使.data工作的帮助都会很棒。

感谢 香农

数据部分看起来应该是这样的

}).data('ui-autocomplete')._renderItem = function (ul, item) {
    return $('<li>')
        .data("item.autocomplete", item)
        .append("<a>" + item.label + "<br/>" + item.desc + "</a>")
        .appendTo(ul);
};

0 个答案:

没有答案