Jquery AutoComplete: How to populate source array using a DOM Element?

Question

This is the standard Jquery Autocomplete code.

<script>
    $(function() {
        var availableTags = [
            "JavaScript",
            "C#",
            "VB.NET",
            "ASP.NET"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
</script>

Let's say I'm able to fill an HTML DOM (delimited text or a grid made of table/tr/td) with data through server-side (ASP.NET/PHP). How would it be possible to "read" through it and store it in "availableTags[]" for Jquery Autocomplete to use?

And if I hide (display:none; perhaps) this DOM Element, will Jquery still be able to "see" it?

Kasaku · Accepted Answer · 2011-11-25 09:23:56Z

1

Why not have the server-side code simply output the javascript declaration of the array right out onto the page? That way you wouldn't need to parse it, and your server-side code is going to be effectively the same in either instance.

answered Nov 25, 2011 at 9:23

Kasaku

2,19216 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Didier Ghys · Accepted Answer · 2011-11-29 09:20:46Z

1

I would prefer the hidden field solution if you are not presenting the data visually. No need to build a table if you hide (even though jquery will be able to work with, it's just a visual hiding, it's still in the DOM).

The .map() function followed by .toArray() generates a javascript array:

<table>
    <tr><td>Value1</td></tr>
    <tr><td>Value2</td></tr>
    <tr><td>Value3</td></tr>
    <tr><td>Value4</td></tr>
    <tr><td>Value5</td></tr>
</table>

var availableTags = $('td').map(function() { return $(this).text(); }).toArray();

Or for a delimited text into an hidden field:

<input type="hidden" id="myhiddenfield" value="value1|value2|value3" />

var availableTags = $('#myhiddenfield').val().split('|');

In action here: Jsfiddle

edited Nov 29, 2011 at 9:20

answered Nov 25, 2011 at 9:13

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Collectives™ on Stack Overflow

Jquery AutoComplete: How to populate source array using a DOM Element?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related