get name of list item click in autocomplete in jquery

Question

Hi all,

In my application I am using autocomplete, I have list as

        <p>
            <input type="text" id="searchField" placeholder="Categories">
            <ul id="suggestions" data-role="listview" data-inset="true"></ul>
        </p>

I have one array name myArray and using autocomplete as:

$("#searchField").autocomplete(
                        {
                            target: $('#suggestions'),
                            source: myArray ,
                            link: 'target.html?term=',
                            minLength:0
                        });

Now I want to get the list item name on which I click and use that variable in target.html file. How to get that? Thanks in advance.

Answer 1

From their help docs.

Callback

When using the optional callback function autoComplete will only execute code found within the callback. The click event object is passed into the callback function for use in accessing the information contained in the selection. Here's one use case:

$("#searchField").autocomplete("update", {
    source: [ "foo", "bar", "baz" ],
    minLength: 3,
    callback: function(e) {
        var $a = $(e.currentTarget); // access the selected item
        $('#searchField').val($a.text()); // place the value of the selection into the search box
        $("#searchField").autocomplete('clear'); // clear the listview
    }
});

OPTION 1 This section will allow you to access the text field

$('#searchField').val($a.text()); // or $a.value()

so do something like this inside the callback event

window.location.replace("http://stackoverflow.com?target=" + $a.text());

OPTION 2 It seems like they expect the result set to be in this format (text & value), so if you'd need other values, you'd need to resort to the jquery autocomplete (which this component is based on)

 $('#some_id').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: 'some_url',
                        dataType: "json",
                        data: {
                            filter: request.term
                        },
                        success: function (data) {
                            response($.map(eval(data), function (item) {
                                return {
                                    label: item.Text,
                                    value: item.Value,
                                    extra_value: item.Extra_Value
                                }
                            }));
                        }
                    })
                },
                maxLength: 2,
                select: function (event, ui) {
                    $("#Some_id2").attr('value', ui.item.extra_value);
                }
            });

UPDATE aka OPTION 3 From their demo code, if you just want the text value, and don't need the ID (like in your case), just change your source format. Rather than returning a JSON result from the server return an array of strings, or convert the JSON result to a string array, which ever flavor you like

(code from the working sample on their demo page)

var availableTags = ['24', 'about me',... , 'XUIJS'];

    $("#searchField").autocomplete({
        target: $('#suggestions'),
        source: availableTags,
        link: 'target.html?term=',
        minLength: 1,
        matchFromStart: false
    });

Answer 2

$("#searchField").autocomplete(
                        {
                            icon: 'arrow-l', 
                            target: $('#suggestions'),
                            source: stockArray,
                            link: 'target.html?term=',
                            minLength:0,
                            callback: function(e)
                            {

                                var $a = $(e.currentTarget); // access the selected item
                                console.log("###################!!###"+$a.text());
                                $('#searchField').val($a.text()); // place the value of the selection into the search box
                                $("#searchField").autocomplete('clear'); // clear the listview
                            }


                        });

Now using $a.text() I get selected item value.

Answer 3

If I use

$("#searchField").autocomplete(
                        {
                            icon: 'arrow-l', 
                            target: $('#suggestions'),
                            source: stockArray,
                            link: 'target.html?term=',
                            minLength:0,
                            callback: function(e)
                            {

                                var nameq = $(e.currentTarget); 
                                console.log("^^^^^^^^^^^^^^^^^^^^^"+nameq);
                                //This function will be called when one of the suggestions is clicked according to documentation
                                window.location = 'target.html?term='  
                            }

                        });

I get value of nameq as

^^^^^^^^^^^^^^^^^^^^^[object Object] at file:///android_asset/www/index.html:115

and If I use

$("#searchField").autocomplete(
                        {
                            icon: 'arrow-l', 
                            target: $('#suggestions'),
                            source: stockArray,
                            link: 'target.html?term=',
                            minLength:0,
                            callback: function(e){

                             var nameq = $(e.target).attr('name');

                             console.log("^^^^^^^^^^^^^^^^^^^^^^^^^^"+nameq);
                            //This function will be called when one of the suggestions is clicked according to documentation
                            window.location = 'target.html?term='  // This line might need some tweaking. 
                        }

I get value of nameq as:

^^^^^^^^^^^^^^^^^^^^^^^^^^undefined at file:///android_asset/www/index.html:115

Answer 4

Use Callback .

$("#searchField").autocomplete(
                        {
                            target: $('#suggestions'),
                            source: myArray ,
                            link: 'javascript:void();',
                            minLength:0,
                            callback: function(e){

                                var name = $(e.target).attr('name');
           //This function will be called when one of the suggestions is clicked according to documentation
                                window.location = 'target.html?term='  // This line might need some tweaking. 
                            }
                        });

The code is not tested, you might need to debug this step by step.