Alter an existing script that works

Question

I do not want to use JQuery. Here is a simple piece of javascript that works that allows you to search a dropdown menu list:

<HTML><HEAD><SCRIPT type="text/javascript">
function searchSel() {
  var input=document.getElementById('realtxt').value.toLowerCase();
  var output=document.getElementById('realitems').options;
  for(var i=0;i<output.length;i++) {
    if(output[i].value.indexOf(input)==0){
      output[i].selected=true;
    }
    if(document.getElementById('realtxt').value==''){
      output[0].selected=true;
    }
  }
}
</SCRIPT></HEAD><BODY>
<FORM>
Search <input type="text" id="realtxt" onkeyup="searchSel()">
<SELECT id="realitems">
<OPTION value="">Select...
<OPTION value="afghanistan">Afghanistan
<OPTION value="albania">Albania
<OPTION value="algeria">Algeria
<OPTION value="andorra">Andorra
<OPTION value="angola">Angola
</SELECT>
</FORM></BODY></HTML>

The problem is that in order for it to work, the value of each option has to have the text. I tried changing the "value" fields in the javascript code to "name" so that it would search the name only, but no go. My option fields have numbers, and I cannot easily convert them to names. Is there a way to tweak this javascript to work with names or better yet search within the option tags?

Sorry I suck at javascript tried learning but never fully understood it so I may be using the wrong terminology. So are you saying if I change value to text it will work? — user3187352, Jan 12 '14 at 13:48
No Namila, rename all of the option values to numbers and it will not work. — user3187352, Jan 12 '14 at 13:52
@user3187352: What exactly does not work then, how do you experience this? Can you make an example of how you renamed the values to numbers, maybe include them in your post by [edit]ing it? — Bergi, Jan 12 '14 at 13:56
Namila why would I search a dropdown of NAMES using numbers only? Seriously? — user3187352, Jan 12 '14 at 14:06

Namila · Answer 1 · 2014-01-12T14:48:14.843

0

use this code, i have replaced "value" with "innerHTML"

 function searchSel() {
                var input = document.getElementById('realtxt').value.toLowerCase();
                var output = document.getElementById('realitems').options;
                for (var i = 0; i < output.length; i++) {
                    if (output[i].innerHTML.indexOf(input) == 0) {
                        output[i].selected = true;
                    }
                    if (document.getElementById('realtxt').value == '') {
                        output[0].selected = true;
                    }
                }
            }

edited Jan 12 '14 at 14:48

answered Jan 12 '14 at 14:08

Namila

754
4
8

I used your new code and it didn't work. When I type in text nothing gets selected in the dropdown – user3187352 Jan 12 '14 at 14:12
It work fine with me.. did u try pressing ctrl+f5 for a full refresh after changing the code? – Namila Jan 12 '14 at 14:16
try moving the script section near to the closing body tag, usually it is the recommended placement.. – Namila Jan 12 '14 at 14:22
try closing all – Namila Jan 12 '14 at 14:27
Yeah ive done that still no go. Are you using Internet Explorer or something? I use FireFox and Chrome. I dont understand why this is so difficult. I am an expert in PHP I could code this with PHP but dont want the page the reload. A way to search between the option tags would be best. – user3187352 Jan 12 '14 at 14:31
I am using google chrome Version 31.0.1650.57 m. I Tried this inside a asp.net project. But should work same for you since i used usually html controls.., just now i checked using a normal html file, it works fine in that also, i will paste the full code as a edit – Namila Jan 12 '14 at 14:37

score 0 · Answer 2 · answered Jan 12 '14 at 14:13

0

This line:

var input=document.getElementById('realtxt').value.toLowerCase();

makes input a string.

<OPTION value=1>text

value is an integer.String will never == integer. Change

if(output[i].value.indexOf(input)==0) to

to

if((output[i].value.indexOf(input)==0) || (output[i].value.indexOf(parseInt(input)))

answered Jan 12 '14 at 14:13

user3187391

1

Thanks for the reply but are you guys testing out the code you provide because it doesnt work. – user3187352 Jan 12 '14 at 14:15

score 0 · Accepted Answer · edited May 23 '17 at 10:33

You will need to change two things in the line

if(output[i].value.indexOf(input)==0){

use the .text property instead of .value at your <option> elements.
make it lowercase to match the lowercased input. With lowercase value attributes and numbers you did not have this problem.

This script would be the result:

function searchSel() {
  var input = document.getElementById('realtxt').value.toLowerCase(),
      len = input.length,
      output = document.getElementById('realitems').options;
  for(var i=0; i<output.length; i++)
    if (output[i].text.toLowerCase().slice(0, len) == input)
      output[i].selected = true;
  if (input == '')
    output[0].selected = true;
}

_{I also have used an improved startswith check.}

Alter an existing script that works

3 Answers3