Question

I have a Jquery UI autocomplete code that grabs data from an ajax request, as i grab the data the results are already put in the input box where the autocomplete is attached. my problem is i have a other data along the data that will be posted with the result of the autocomplete.

I had tried to grab all the i need and put it in a single string with delimeters so i can split() it on the client-side. I want to save the other data in a hidden text field

here is my code

    <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

You idea is right, you must use a callback as the source parameter. I’ve put together an example here:

Demo on jsFiddle

If you read the documentation carefully it says:

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.

So here is an example implementation I used in the demo:

$("#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
            }
        });
    }
});