Question

I have an ASPX page that creates a Gridview. My JQuery function pulls values from the Gridview data to populate my JQuery autocomplete source. All works fine with this. Now I want to have my autocomplete values go to a link when they are clicked. That link is also in the Gridview where I use text() to get the text value. (I search my Gridview for links containing “ModelDetail” and store the text to an array) Do I need a JQuery 2 dimensional array? If so, how can I do this? Here’s my code:

<script language="javascript" type="text/javascript">
    $(document).ready(function() {

        var modelnames = new Array();
        $('#ctl00_body_modellistGrid a[href*="ModelDetail"]').each(function() {
            modelnames.push($(this).text());
        })


        $("input#autocomplete").autocomplete({
            source: modelnames
        });

    });

</script>

Thanks in advance!
Bob

Answer 1

JavaScript handles arbitrary objects very nicely — use an object to store the text and the link.

My JavaScript is a little rusty, but something like this should work:

var models = [];
$('#ctl00_body_modellistGrid a[href*="ModelDetail"]').each(function(i) {
    // Note that we're using the optional index parameter of the each function,
    // which I have called 'i'
    // We will create an object with a label and a value and store it in models[i]
    models[i] = { label: $(this).text(), value: $(this).attr("href") };
});

// We will now pass this array of objects to the autocomplete function
// The autocomplete function, if given an array of objects, is expecting
// two properties: 'label' and 'value'
$("input#autocomplete").autocomplete({
    source: models,
    // We will also provide a function when the user selects an option
    select: function(event, ui) {
        // ui.item should hold the object we passed in, I think
        // Let's redirect the user to the url
        // ui.item.value should hold the url
        window.location.href = ui.item.value;
    }
});

I believe the above should work. I put a very basic demo on jsFiddle: –> http://jsfiddle.net/B3dgW/