Navigation in Dropdown List

Hello!

Ah, AutoComplete..

This may be helpful for IE.
http://www.oreillynet.com/pub/a/javascript/2003/09/03/dannygoodman.html

Hey Hans,
It is Working perfect,
but i hve strucked with small issue in it.

It is:

If the user then types a letter that does not match any name such as Jis, system should stay at the position of the first name starting with the last valid match, in this case - Ji.

Please advise me...,,,
Thnx in advance...

Yugi

Sorry Hannes, I guess I am taking another one of yours over. Hope you don't mind.

Don't worry about it Paul, I saw this thread this morning, wanted to reply, but quite obviously forgot about it:eek:

It's actually good you adopted this thread, because you're code you just posted is amazing! Nobody could have done it better;)

:wave:

My Sincere Thnx for Paul and Hans..,,,,

Hi Paul,

Ur code working pretty gud.

It is working only for the word "johnson".,,But When i enter words like "smith" or "simpson" etcccc it is not working perfectly.

As according to my requirement i dont hve chance to put one more text field.

I have to implement the above said feature in select drop down list only.

Actually Hans given the link for this prblem in previous reply.
that code is really suitable for my requirement and it is working fine.

But according to my requirement :

Say If the items in my select box are :

cook,Ivery, james,jake,jill,jones,Mike,Nancy.

1)
If the user types in a J, system should scroll the list so that the names starting from Jake are displayed at the top. If the user further types an i to make it Ji, system should further scroll to the names starting from Jill and so on.

**** Up to the above req ,the code which have sent by Hans is working perfect.

2)
If the user then types a letter that does not match any name such as Jis, system should stay at the position of the first name starting with the last valid match, in this case - Ji.

## The Problem is :-- it is selecting an item which starts with "s" because
it didnt found a word like "jis"

#### But for the requirement 2 it has to stay at "ji" only.

Can u please advise me..,

If u need i wll send the code(Link is there in previous reply post sent by Hans) sent by Hans.

Thnx in advance..

Yugi..,

Well, what did you change on it? It only matches strings. The code works completely in IE, Firefox, and Safari.

Hi Paul,

I didnt change any thing in that code, But it is not working for me in IE 6.

It is jumping to first letter only when it does not get match word.

Actually i need answer for that problem itself.

It is working perfect when it finds the continuous match.

If it not able to find any match (Even after finding matched word for some letters in that word) as specified earlier.

Please help me out in this issue.

Its very urgent need for me and for my project.

Thanks
Yugi

Hi Paul,
Actually my requirement is :

System should display the names in the Select Recipient drop-down list on all the Refer Case screens as LastName, FirstName. This list should be further sorted by the Last Name in alphabetical order from A to Z.
The field for the Select Recipient field should be of a type where the user can type in the first few letters of the required name for selection purpose. As the user starts typing, system should auto-scroll through the list of available options, to the names matching the alphabets that are being typed in so that the user does not have to scroll through the entire list.

***** Up to the above reuirement i wll get values sorted by Order from Data Base.*******

###But for the below requirement i need Java Script Function.###

E.g. Assuming that the last names in the list arranged in alphabetical order are:
..Holmes, Iverson, James, Jeter, Johnson, Jones, King, Martin

If the user types in a J, system should scroll the list so that the names starting from James are displayed at the top. If the user further types an o to make it Jo, system should further scroll to the names starting from Johnson and so on. If the user then types a letter that does not match any name such as Jos, system should stay at the position of the first name starting with the last valid match, in this case - Jo. User can then select the appropriate name that he/she wishes to select.
Once selected the name should get displayed in the field as the selected option.

Can u plz help me out,
Its very urgent for me.

Thanks in Advance
Yugi

HI Paul,

Thnx for ur reply,
Is there any other way to meet this requirement.

Can u plz help me .

Thnx in advance

Yugi

You would have to use ASP.NET forms and that is a whole different forum. It is located here (http://www.dev-archive.com/forum/forumdisplay.php?f=15).

Hi Paul,

Thnx for ur reply,

But i dont know ASP.net or any .net suites.

I m working on Java Platform.

I have to implement in either Java or JavaScript.

Can u plz help me out.

Thnx in advance.

Yugi

I know that this thread is old, but I was working on a project for which I needed something with auto-complete. I worked on a new theory and came up with the following.

I thought I should post it because it is very useful and I am sure that many others might want it.

<html>
<body>
<center>

<script language="JavaScript">
function filltxt(v){
document.getElementById('txtname').value = v;
rdiv.innerHTML = "";
}
function changeselect(txt){
txt = txt.toLowerCase();
var results = 0;
rdiv.innerHTML = "";
if(txt != ""){
var newList = "<table cellpadding=2 cellspacing=0 style='border:1px solid #000000' bgcolor='#ffffff' width=100%>";
for(i=0;i<inpName.length;i++){
var strpart = inpName.options[i].value.substr(0, txt.length)
strpart = strpart.toLowerCase();
if(strpart == txt){
results = results + 1;
var cellColor = " onmouseover=\"this.style.background='#eeeeee'\" onmouseout=\"this.style.background='#ffffff'\"";
var cellClick = " onclick=\"filltxt('" + inpName.options[i].value + "')\"";
newList += "<tr><td" + cellColor + cellClick + " style='cursor:pointer'>" + inpName.options[i].value + "</td></tr>";
}
}
newList += "</table>";
if(results == 0){
document.getElementById('txtname').style.background = "#ffaaaa";
}
else{
document.getElementById('txtname').style.background = "#ffffff";
rdiv.innerHTML = newList;
}
}
}
</script>

<br><br><br><br>Just start typing a state of the United States.<br>
You can use the mouse to select the state.<br><br>
<input type="text" id="txtname" onkeyup="changeselect(this.value)"><br>

<div id="divresults" style="position:absolute"></div>

<select id="lstname" style="display:none">
<option value="">Choose State...</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>

<script language="JavaScript">
var inpName = document.getElementById('lstname');
var rdiv = document.getElementById('divresults');
obj = document.getElementById('txtname');
if(obj.offsetParent){
x = obj.offsetLeft;
y = obj.offsetTop;
h = obj.offsetHeight;
w = obj.offsetWidth;
while(obj = obj.offsetParent){
x += obj.offsetLeft;
y += obj.offsetTop;
}
}
document.getElementById('divresults').style.left = x;
document.getElementById('divresults').style.top = y + h;
document.getElementById('divresults').style.width = w;
</script>

</center>
</body>
</html>