Tom's Guide | Tom's Hardware | Tom's Games
 |
 |
 |
Hey guys i need some suggestions, i need to create an autocomplete field in a client db. I am thinking of maybe doing a hidden div that populates with the db info? Any suggestions on where to start, and i think i will need ajax with this as well.
Need more specifics. I'm not sure what you mean by "...i need to create an autocomplete field in a client db."
I will make an attempt at what I think you may mean:
You have an input field on a page. You awnt the field to "auto-complete" as the user is typing from a list of current values in the database.
Is this correct?
Michael J
0 
Yes, I am sorry about the vagueness, I want people to be able to put in a letter in the text field and have it bring up all the people that start with that letter, if possible they can type in second letter and it narrows it down even further, but two letters should be sufficient. then they can point to the name they want, click and if fills the box. I am thinking the easiest way yo do this is with a hidden div then opens with a onkeyup sort of feature and fills in a list order from an array from the db, or something like that. Any ideas?
0
I tried doing this AJAX Suggest thingy a few months ago, and I give up on trying to make it work "perfect" in major browsers.
What I mean by perfect is not just the functionality, but also the layout, pixel-wise. 0_0
---
Fubar
0
The first question you need to ask is if you want to have this run client-side only (only javascript) or a combination (AJAX).
If you run it client-side only it will be much faster. The only downside is based upon how many records there are. If there are a couple hundred you are probably OK to use this method. But, if you are talking thousands, then that might be too much to download to the client.
If you run it through AJAX, there will be a delay. That delay may not be acceptable as the person is typing. In the end it is up to you to decide. You may have to actually try both methods and do some performance tests.
I have done similar implementations in the past. In those I only used JavaScript AND I did not include a "list" to pick from. I simply populated the first mach based upon what the user had entered at each key-stroke.
In my opinion, I would go with a JavaScript only solutino unless there is a valid reason not to due to the performance benefits. This is a multi-part problem. You just need to break it down into specific elements and solve each one. Here are the elements as I see them:
1. Create the PHP code to create a JavaScript array on the page of all the possible values.
2. Create a JavaScript lookup function to find all the "matching" values based upon a supplied string.
3A. Create an onkeypress/onkeydown event for the input field which call a function that passes the enetered value to the lookup function.
3B. In this same function you have to determine how you will display the results of the lookup function. I would suggest populating the first match in the input field (which also means you need to set it to select only the letters the user has entered thus far). For the remaining values you can display a div with each value having an onclick function to populate the input with that specific value.
Michael J
0
alright, I have made the autocom i need to fplete, butigure out one thing. I need to make it so when someone clicks enter on the highlighted suggestion it goes to the ajax for showuser(). is a lot of code so i am not goint to post it all.
var TAB = 9;
var ESC = 27;
var KEYUP = 38;
var KEYDN = 40;
var ENTER = 13;
/********************************************************
onkeydown event handler for the input elem.
Tab key = use the highlighted suggestion, if there is one.
Esc key = get rid of the autosuggest dropdown
Up/down arrows = Move the highlight up and down in the suggestions.
********************************************************/
elem.onkeydown = function(ev)
{
var key = me.getKeyCode(ev);switch(key)
{
case TAB:
me.useSuggestion();
break;case ENTER:
showUser(document.getElementById('lead').value);
break;case ESC:
me.hideDiv();
break;case KEYUP:
if (me.highlighted > 0)
{
me.highlighted--;
}
me.changeHighlight(key);
break;case KEYDN:
if (me.highlighted < (me.eligible.length - 1))
{
me.highlighted++;
}
me.changeHighlight(key);
break;
}
};/********************************************************
onkeyup handler for the elem
If the text is of sufficient length, and has been changed,
then display a list of eligible suggestions.
********************************************************/
elem.onkeyup = function(ev)
{
var key = me.getKeyCode(ev);
switch(key)
{
//The control keys were already handled by onkeydown, so do nothing.
case TAB:
case ENTER:
case ESC:
case KEYUP:
case KEYDN:
return;
default:if (this.value != me.inputText && this.value.length > 0)
{
me.inputText = this.value;
me.getEligible();
me.createDiv();
me.positionDiv();
me.showDiv();
}
else
{
me.hideDiv();
}
}
};
/********************************************************
Insert the highlighted suggestion into the input box, and
remove the suggestion dropdown.
********************************************************/
this.useSuggestion = function()
{
if (this.highlighted > -1)
{
this.elem.value = this.eligible[this.highlighted];
this.hideDiv();
//It's impossible to cancel the Tab key's default behavior.
//So this undoes it by moving the focus back to our field right after
//the event completes.
setTimeout("document.getElementById('" + this.elem.id + "').focus()",0);
}
};i want to make it so when someone highlights the choice and presses enter it goes straight to the showuser() function in the ajax file.
I will post more code if needed
0  |
 |
 |
This post is quite old and has been locked from receiving new replies. Please create a new posting instead.
| Ads by Google |
