/    Sign up×
Community /Pin to ProfileBookmark

How to reuse autocomplete code on multiple fields on same page?

Copy linkTweet thisAlerts:
Jun 26.2007

[url]http://www.webreference.com/programming/javascript/ncz/column3/[/url]

I recently implemented the code from the above Tutorial, to implement “autocomplete” functionality on a field on my web-page. All is well, except now I need to have it work on 3 fields on my web-page, and I’m not experienced enough with JS to know how to create multiple instances.

Looking through the code, I see that the text input field (txt1) gets the functionality via this code on page-load:

var oTextbox = new AutoSuggestControl(document.getElementById(“txt1”), new StateSuggestions());

so then I looked through the JS and I see that oTextbox gets used in 2 places. You can see where by looking at the JS at : [url]http://www.webreference.com/programming/javascript/ncz/column3/autosuggest2.js[/url]

And that’s where I get lost – – – in the world of JS private class scoping and prototypes. If someone could show me how I could do autocomplete on more than 1 field on a page at a time, I’d greatly appreciate it. What I’ll need to have happen is to have field A autocomplete with one set of suggestions, and field B autocomplete with another set.

Unfortunately, I am unable to email the author (his site keeps saying my messages are spam ?

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@Banana_AnandaJun 26.2007 — This works, if you have a 2nd textbox: [FONT="Courier New"]id="txt2"[/FONT]


[code=php]window.onload = function () {
var oTextbox = new AutoSuggestControl(document.getElementById("txt1"), new RemoteStateSuggestions());
var oTextbox = new AutoSuggestControl(document.getElementById("txt2"), new RemoteStateSuggestions());
}[/code]

However the problem is that the main part of the url is hardcoded into the [FONT="Courier New"]RemoteStateSuggestions [/FONT]method, [FONT="Courier New"]requestSuggestions[/FONT]:

[code=php]"suggestions.php?userInput="[/code]

I'm guessing that these amendments below would allow you to create RemoteStateSuggestions objects that can make queries to other locations.

1) Add the required url part as an argument when creating:

[CODE]var oTextbox = new AutoSuggestControl(document.getElementById("txt1"), new RemoteStateSuggestions([COLOR="Blue"]"suggestions.php?userInput="[/COLOR]));[/CODE]

2) Include that argument in the constructor declaration, and assign it to a new object property in the body.

[code=php]function RemoteStateSuggestions(mainUrl) {

// --- current content ---

this.mainUrl = mainUrl;
}[/code]

3) Amend this line like so in the [FONT="Courier New"]requestSuggestions [/FONT]method:

[code=php]

//build the URL
var sURL = this.mainUrl + encodeURIComponent(oAutoSuggestControl.textbox.value);[/code]


..and it should work.

(The name, [FONT="Courier New"]RemoteStateSuggestions[/FONT], may now be too specific)
Copy linkTweet thisAlerts:
@GouldTVauthorJun 28.2007 — Thanks for your help - - - I'm getting closer! Now on to something really hard...

http://www.webreference.com/programm...t/ncz/column3/

To recap, I'm implementing JS code from the above tutorial on how to create an autocomplete feature. It's working great - - - but I need to expand upon the functionality:

To describe what I'm trying to do, I'll have to point you to some URLs:

1) http://www.librarytools.com/shipping/waybill.php?userid=1?formnum=1

Here's the input form I'm working on. Notice how you can type into the Air WayBill field and the dropdown works. Yay!

2) http://www.librarytools.com/shipping/suggestions3a.js

Notice how the data available is actually 3 columns. What I need to somehow accomplish is to make it so that when the user hits ENTER, the "prefix" number in the 3rd column gets inserted into another field on the page. I can handle putting the value into a field on the page - - - I just need help getting the value out of the array upon ENTER.

3) http://www.librarytools.com/shipping/autosuggest2.js


So somehow, I need to pass the selected airline's prefix # to the handler in autosuggest2.js that handles the ENTER key. The problem that I'm seeing is that there's no way to get the index-number of the array of data when the enter key is pressed, to determine the entry. It's tricky, and I'm way over my head with JS prototyping and OOP logic in this tutorial. If someone could get me past this last hurdle, I should be able to use this technique throughout - - - and others would benefit too.

Thanks in advance to anyone who can help! Very much appreciated.
×

Success!

Help @GouldTV spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...