Jquery autocomplete problem: multiple text boxs with same content + text file source

JavaScript
1

I am having a hard time with jquery autocomplete and hope somebody can give me some tips.

1/ I am getting my data from a database to populate the array and this is what I have when I view source:


  <script>
  $(function() {
    var availableTags = [
"13th Floor Records",
"77 Records",
"A Cappella Records",
"A&E Records",
"Flair Records",
"FRE Records",
"Goldenrod Records",
"Hermes records",
"Reprise Records",
"Rhythm King",
"Xemu Records"   ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>

This works OK but I have the same autocomplete box 4 times on one page and I thought I would call the same code 4 times on the page but this will not work. The first time it is called is the only one that will work.


<label for="tags">Recording company: </label>
<input name="tags" id="tags" /><br/>

So I have 4 copies of the script with different names.

2/ There are going to be a lot of items in the array and as above was not working how I wanted I thought I would use a text file pre generated from the database and found this example which will not work at all:


<script>
jQuery.get( 'companies.txt' ).done(function( data ) {
$( "#performer3" ).autocomplete({
source: 'companies.txt'
});
});
</script>

Also any comments on wether 4 database calls are better/worse than reading a text file 4 times?

2

I will checkout mootools and see if that is any better.

3

Just getting back to this after working on the database section and have decided to give up with the Jquery UI autocomplete.
I can not sort my problems or find an answer that works online and thought about joining the Jquery UI forum. The last question in the autocomplete section was in 2010 and only one or two of the questions there have received an answer.

4

Hi Rubble,

I just saw this having been away for a while (holiday).
If you fancy, we could have a shot at making this work with jQuery UI autocomplete.
I’m sure it won’t be too difficult to sort out (famous last words :)).
Just let me know.

5

Thanks for the offer Pullo.
I also spent about three hours last night trying to get the Devbridge version working. The trouble is with both these pieces of code is there are not enough examples/instructions for somebody who knows nothing about JavaScript!

I am at work at the moment and can not do very much but this is some code that I have working to some extent. I have got around the multiple versions on one page by calling each part of the code a different name e.g. performer_A1, performer_A2 and using different sources available Performer1, availablePerformer2.


   <script>
  $(function() {
    var availablePerformer1 = [ 
"Anna Netrebko",
"Enrico Caruso",
"Joan Sutherland",
"Jose Carreras ",
"Kiri Te Kanawa",
"Luciano Pavarotti ",
"Maria Callas",
"Placido Domingo",
"qwerty"   ];
$( "#performer_A1" ).autocomplete({
source: availablePerformer1
});
});
</script>

   <script>
  $(function() {
    var availablePerformer2 = [ 
"Anna Netrebko",
"Enrico Caruso",
"Joan Sutherland",
"Jose Carreras ",
"Kiri Te Kanawa",
"Luciano Pavarotti ",
"Maria Callas",
"Placido Domingo",
"qwerty"   ];
$( "#performer_A2" ).autocomplete({
source: availablePerformer2
});
});
</script>

The wordlist is being populated by a php query ( which I can not post at the moment as I do not have access to it ) but this is not very efficient.

As I say I can not do a lot now until I get to my PC and I can post more of the code.

6

Hi Rubble,

No problem :slight_smile:

Having two different arrays with the same content is not optimal and I’m sure we can do that better.

Just to check that I’ve understood everything correctly thus far:

You want four autocomplete boxes on the same page which are populated from a database.
They should all contain the same data.
Using jQuery autocomplete (with the source attribute) you got the first of them working, but the other three are refusing to play ball.

Is that right?

I should be around tonight, so I’m sure we’ll get this sorted out soon.

7

Using jQuery autocomplete (with the source attribute) you got the first of them working, but the other three are refusing to play ball.

They all work now ( except for one doubles up the results for some reason ) but I need a database call for each one and they are all named differently. I tried creating a text file and using that as the source as it seemed the best way to do it - one database call when the page loads and then use the text file as the source - but I could not get that to work.

There are also 12 of these on the one page all using the same data and so you can see the reason for trying to streamline it!

8

Pullo came up with the answer:

Reference all of the necessary elements using the “attribute starts with” selector:

$(“input[name^=‘performer_’”).autocomplete({
source: availablePerformers
});

and pass them the variable we build up using the MySQL query.

Ideally, the PHP code should be removed from the HTML and into its own file.
E.g.

$(“input[name^=‘performer_’”).autocomplete({
source: getPerformers.php
});

This populates all 12 autocomplete boxes with the same data.

The form fields were in this format:


<label for="performer_B1">Artist B1: </label>
<input name="performer_B1" id="performer_B1" /><br/>

<label for="performer_B2">Artist B2: </label>
<input name="performer_B2" id="performer_B2" /><br/>

<label for="performer_B3">Artist B3: </label>
<input name="performer_B3" id="performer_B3" /><br/>