Welcome Guest, Not a member yet? Register   Sign In
Autocompleter without unique id

I am trying to implement the scriptaculous ajax.autocompleter in a recipe creation form. I have been able to get the autocompleter working, but not under the circumstances i ultimately want.

Again the context is a recipe creation form (brewing recipe, but a recipe nonetheless). One section of the form gathers ingredients in a certain category, I'll refer to as CatX. CatX can collect one or more ingredients and has 2 attributes for each ingredient:
- name (text control), qty

I want to use autocompleter on the "name" text control. the control has a name="CatX[name][]" so I can collect a number of them. to get autocompleter to work you must provide the text control with an id (id="catx_name"). Since I generally have more than one of these the id is not unique and therefore the autocompleter chokes. That is, the autocompleter works on the first control, but not the subsequent name controls.

I'm hoping someone has run into this before and could provide some insight on how to overcome it.

Thanks, mike

Welcome to the CodeIgniter forums.

IDs must be unique, otherwise it's not valid HTML.

Thanks for the welcome fuzzyone.

Yeah, I know that id's must be unique and I can generate a unique id for each text input control, but the sriptaculous ajax.autocompleter function requires I identify the id of the control to be used for auto completion. I want to reuse the autocompletion function for each text input control (name attribute). If I generate unique id's the function no longer knows which control to use. I feel like I'm chasing my tail a bit.

I'm not clever enough to have discovered something new - I'm assuming other folks smarter than myself have run into this before.

Can you not specify the ID for it to use?

I guess your question is really the same one I have. Can I dynamically change the autocomplete function to handle multiple text controls?

Here is the autocompleter function:
new Ajax.Autocompleter(

Then I have one or more text controls that display autocomplete options list(almost always more than one):
<input type="text" id="id_of_text_control" name="CatX[name][]" value="" />

If I give the second controls (and all subsequent ones) a unique id then the autocompleter function no longer works.

I think it might help to keep your IDs generic. cat1, cat2, cat3 and so on, should suffice. They aren't needed for CSS, but only for JavaScript access, so they would be better in sequence.

Then you can attach a new Autocompleter to each of those IDs.

The easy way would be to just loop through your inputs and create a new ajax.autocomplete object foreach. I know jQuery provides an easy way to select elements based on ID, I haven't used script.aculo.us for a while so I'm not sure if it has the same. Ideally you could just slap a class on any input you want to be auto-complete, then just iterate through them and attach the event binding.

My guess as to why script.aculo.us requires you to call the function separately for each input is that each input may have a different 'dictionary' of values to autocomplete from (states, countries, names, shoe size, etc.)

Slowgary - I'm looking into jQuery now, and may switch to that if it provides a solution. I'll post when I have it solved. Thanks all.

Theme © iAndrew 2016 - Forum software by © MyBB