javascript - 用 indexOf 匹配用户输入

Question

我正在尝试显示与用户输入匹配的文本。它在用户输入第一个字符时显示结果，例如“a”，但当输入第二个字符时没有任何反应，例如“as”。所以我希望当用户输入时显示棒球和快速。

// JavaScript Document

s1= new String()
s2= new String()
var myArray = new Array();

myArray[0] = "Football";
myArray[1] = "Baseball";
myArray[2] = "Cricket";
myArray[3] = "Fast";


function test() //  called onkeyup() event
{
 s1 = document.getElementById('filter').value;
 s2 = s2+s1;
 arraysearch();
}

function arraysearch()
{
    for(i=0; i<myArray.length; i++)
    { 
       if (myArray[i].indexOf(s2) != -1) // also tried using match method
       { 
           alert('Matched');           
           document.getElementById('placeholder').innerHTML += myArray[i] + "<br/>";
       }
    }
}

Answer 1

 <script type="text/javascript" language="javascript">
            function ShowMe(obj) {

                var lbl = document.getElementById('divContent');

                var myArray = new Array();
                myArray[0] = "Football";
                myArray[1] = "Baseball";
                myArray[2] = "Cricket";
                myArray[3] = "Fast";

                var s2 = obj.value.toLowerCase();

                for (i = 0; i < myArray.length; i++) {
                    if (myArray[i].toLowerCase().indexOf(s2) != -1) 
                    {
                        lbl.innerHTML = myArray[i];
                    }
                }

            }

        </script>

HTML 代码

<div>
<h1>JS Test</h1>
    <input id="txtInput" onkeyup="javascript:ShowMe(this)" />
    <div id="divContent">

    </div>
</div>

Answer 2

试过了，我实施了一个解决方案来帮助你。您可以使用正则表达式更好地比较和匹配字符串。它仅使用 jquery 进行 dom 操作，但仅此而已。您可以继续编辑它。希望能帮助到你。

http://jsfiddle.net/cy4QH/2/

Answer 3

如果“filter”是一个输入元素，并且您设置了它的“onKeyUp='javascript:arraysearch()'”，那么此代码应该适合您。

function arraysearch() 
{ 
  for(var i in myArray) 
  {  
    if (myArray[i].toLowerCase().indexOf(document.getElementById('filter').value) != -1) 
    {  
       alert('Matched');            
       document.getElementById('placeholder').innerHTML += myArray[i] + "<br/>"; 
    } 
  } 
}