Jquery autocomplete not working with large array

Question

I've got an array with 6000 plus user names that I've pulled from MySQL like this:

$pop = mysql_query("SELECT * FROM import_student");
while ($r = mysql_fetch_assoc($pop)) {
 $student_array[] = $r['studentfirstname']." ".$r['studentlastname'];
}

    $big_array = json_encode($student_array);

I then pass this array to JS and initialize my auto complete function like this.

<script>
$(document).ready(function() {
var availableTags = <?php echo $big_array; ?>;
console.log(availableTags);
    $( "#tags" ).autocomplete({
            source: availableTags
        });
});
</script>

This works great when I limit the SQL results to 0,10, but when I don't limit and I get the 6000 or so usernames into the array, the autocomplete doesn't work. I get this error in firebug:

value is null 

return matcher.test( value.label || value.value || value );

Anyone know what I'm doing wrong here? Like I said, this works when I limit the results. Something about having a large array? IDK.

Joseph · Accepted Answer · 2012-05-23 17:23:06Z

1

I tested before (some 2k items for 1-2 letters) and it has to do with the parsing as well as rendering your large result set to the DOM.

You should reduce results by limiting the possibilities. You can do this by raising your minimum characters to at least 3-4.

Also, you should do a little caching on your result set instead of having jQuery re-parse it every entry. For example, I searched for ad. I should store in an object the results under the key ad.

var cache = {
    'ad' : [...results...],
    'adder' : [...results...],
    ...and so on...
}

When the autocomplete queries for ad again, it should search for the key in the cache first and return the results if it exists. You should have a caching logic to avoid stale data. Afaik, jQuery has simple caching demo in autocomplete.

answered May 23, 2012 at 17:23

Joseph

120k31 gold badges186 silver badges238 bronze badges

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

Comments

Jayyrus · Accepted Answer · 2012-07-13 06:55:24Z

0

i retrieve your same problem... you could use autocomplete using instead all array, a part creted by another script.. something like:

$('#tags').autocomplete({
        source : "aScript.php",
};

and aScript.php:

$autocompleteValue = $_GET["term"];
$pop = mysql_query("SELECT * FROM import_student WHERE 'studentfirstname' LIKE '$autocompleteValue%'");
while ($r = mysql_fetch_assoc($pop)) {
   $student_array[] = $r['studentfirstname']." ".$r['studentlastname'];
}

return json_encode($student_array);

answered Jul 13, 2012 at 6:55

Jayyrus

13.1k41 gold badges136 silver badges215 bronze badges

Collectives™ on Stack Overflow

Jquery autocomplete not working with large array

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