javascript - 拦截并预处理 jQuery-ui 自动完成数据

Question

我有一个 Jquery UI 自动完成代码，可以从 ajax 请求中获取数据，当我获取数据时，结果已经放入附加了自动完成功能的输入框中。我的问题是我还有其他数据以及将与自动完成结果一起发布的数据。

我试图获取我需要的所有内容，并将其放入带有分隔符的单个字符串中，以便我可以在客户端对其进行 split() 。我想将其他数据保存在隐藏文本字段中

这是我的代码

    <div id="01ac091c834d81b41f0ef4b6eb09cde90bb9aa1a" style="display:none" title="Add Member">
        Type the name of the member
        <br>
        <br>
        <div style="text-align:center">
            <input type="text" id="txtUserFind" size="35">
        </div>
        <input type="hidden" id="hidtxtUserFind-nickname">
        <input type="hidden" id="hidtxtUserFind-userhash">
        <input type="hidden" id="hidtxtUserFind-picture">
        <input type="hidden" id="hidtxtUserFind-sex">
    </div>
    <script type="text/javascript">
    head(function() {


        $(":button:contains('Select User')").attr("disabled","disabled").addClass("ui-state-disabled");

        $("#txtUserFind").keydown(function(){
            $(":button:contains('Select User')").attr("disabled","disabled").addClass("ui-state-disabled");
        });


        $("#txtUserFind").change(function(){

        var userdetails = $("#txtUserFind").val().split(";");
        alert($("#txtUserFind").val());

        /*
        0  profiles.nickname,
        1  profiles.firstname,
        2  profiles.surname,
        3  users.user_hash,
        4  profiles.sex,
        5  profiles.picture
        */

        $("input#hidtxtUserFind-nickname").val(userdetails[0]);
        $("input#txtUserFind").val(userdetails[1] + " " + userdetails[2]);
        $("input#hidtxtUserFind-userhash").val(userdetails[3].replace("u-",""));
        $("input#hidtxtUserFind-sex").val(userdetails[4]);
        if(userdetails.length > 5){
            $("input#hidtxtUserFind-picture").val(userdetails[5]);
        }   

        });

        $("<?php echo $tagmemberbtn; ?>").click(function(){
            $("#01ac091c834d81b41f0ef4b6eb09cde90bb9aa1a").dialog({
                modal:true,
                resizable: false,
                height:250,
                width:400,
                hide:"fade",
                open: function(event, ui){
                    searchdone = false;
                    $(":button:contains('Select User')").attr("disabled","disabled").addClass("ui-state-disabled");
                },
                beforeClose: function(event, ui){
                    $("#txtUserFind").val("");
                },
                buttons:{
                    "Select User":function(){
                        $(this).dialog("close");
                    },
                    "Close":function(){ 
                        searchdone = false;
                        $("#txtUserFind").val(""); 
                        $(this).dialog("close");                
                    }
                }
            });
        });

        $(function() {
            var cache = {},
            lastXhr;
            $("#txtUserFind").autocomplete({
                source:function(request,response) {
                    var term = request.term;
                    if ( term in cache ) {
                        response(cache[term]);
                        return;
                    }
                    lastXhr = $.getJSON(cvars.userburl+"getusers", request, function(data,status,xhr) {
                        stopAllAjaxRequest();
                        cache[ term ] = data;
                        if ( xhr === lastXhr ) {
                            response( data );
                        }
                    });
                },
                minLength: 1,
                select: function(event, ui) {

                    $(":button:contains('Select User')").removeAttr("disabled").removeClass("ui-state-disabled");
                }
            }).data("autocomplete")._renderItem = function(ul,item){
                if(item.picture==null){
                    //know if girl or boy
                    if(item.sex<=0){
                        item.picture = cvars.cthemeimg + "noimagemale.jpg";
                    }
                    else{
                        item.picture = cvars.cthemeimg + "noimagefemale.jpg"; 
                    }
                }
                else{
                    item.picture = cvars.gresuser + "hash=" + item.user_hash.replace("u-","") +"&file="+item.picture.replace("f-","");
                }
                var inner_html = '<a><div class="autocomplete-users-list_item_container"><div class="autocomplete-users-image"><img src="' + item.picture + '" height="35" width="35"></div><div class="label">' + item.nickname + '</div><div class="autocomplete-users-description">' + item.firstname + " " + item.surname + '</div></div></a>';
                return $("<li></li>")
                    .data("item.autocomplete",item)
                    .append(inner_html)
                    .appendTo(ul);
            };
        });
});

Answer 1

你的想法是对的，你必须使用回调作为source参数。我在这里整理了一个例子:

Demo on jsFiddle

如果您阅读 documentation仔细地写着:

The third variation, the callback, provides the most flexibility, and can be used to connect any data source to Autocomplete. The callback gets two arguments:

A request object, with a single property called "term", which refers to the value currently in the text input. For example, when the user entered "new yo" in a city field, the Autocomplete term will equal "new yo".

A response callback, which expects a single argument to contain the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data (String-Array or Object-Array with label/value/both properties). It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

这是我在演示中使用的示例实现:

$("#autocomplete").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "/echo/html/", // path to your script
            type: "POST",       // change if your script looks at query string
            data: {             // change variables that your script expects
                q: request.term
            },
            success: function(data) {
                                // this is where the "data" is processed
                                // for simplicity lets assume that data is a
                                // comma separated string where first value is
                                // the other value, rest is autocomplete data
                                // the data could also be JSON, XML, etc
                var values = data.split(",");
                $("<div/>").text("Other value: " + values.shift()).appendTo("body");
                response(values);
            },
            error: function() {
                response([]);   // remember to call response() even if ajax failed
            }
        });
    }
});