Javascript 改变一个可用的现有脚本_Javascript_Search

Javascript 改变一个可用的现有脚本

javascript search

Javascript 改变一个可用的现有脚本,javascript,search,Javascript,Search,我不想使用JQuery。是一个简单的javascript，可用于搜索下拉菜单列表： <HTML><HEAD><SCRIPT type="text/javascript"> function searchSel() { var input=document.getElementById('realtxt').value.toLowerCase(); var output=document.getElementById('realitems').optio

我不想使用JQuery。是一个简单的javascript，可用于搜索下拉菜单列表：

<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>


函数searchSel（）{
var input=document.getElementById（'realtxt'）.value.toLowerCase（）；
var output=document.getElementById（'realitems'）。选项；
对于（var i=0；i使用此代码，我将“value”替换为“innerHTML”
函数searchSel（）{
var input=document.getElementById（'realtxt'）.value.toLowerCase（）；
var output=document.getElementById（'realitems'）。选项；
对于（变量i=0；i
此行：
var input=document.getElementById('realtxt').value.toLowerCase();

使输入成为字符串
<OPTION value=1>text

到
你需要改变两件事

使用.text
属性，而不是您的计算机上的.value
将其设置为小写以匹配小写输入。使用小写value
属性和数字时，您不会遇到此问题

此脚本将是以下结果：
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;
}

函数searchSel（）{
var input=document.getElementById（'realtxt'）.value.toLowerCase（），
len=输入长度，
输出=document.getElementById（'realitems'）。选项；
对于（var i=0；i）您所说的“名称”是什么意思？一个
元素有两个相关属性：.value
作为value属性，而.text作为其内容。很抱歉，我在javascript方面做得很差劲，但一直没有完全理解它，所以我可能使用了错误的术语。那么，你是说如果我将value更改为text，它会起作用吗？我将这两行添加到了新选项中ons 123 456但代码仍然有效…不，Namila，将所有选项值重命名为数字，它将不起作用。Bergi我将.value更改为.text，但仍然无效。我使用了你的新代码，但它不起作用。当我键入文本时，下拉菜单中未选择任何内容。它对我起作用很好。你是否尝试在更改后按ctrl+f5进行完全刷新e代码？尝试将脚本部分移到靠近结束正文标记的位置，通常这是建议的位置。尝试关闭所有标记，如hnyYeah，我仍然没有这样做。你使用Internet Explorer还是什么？我使用FireFox和Chrome。我不明白为什么这么难。我是PHP专家，我可以用PHP编写代码，但确实如此不要重新加载页面。在选项标签之间搜索的方法最好。谢谢回复，但你们正在测试你们提供的代码，因为它不起作用。
if(output[i].value.indexOf(input)==0) to

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

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

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;
}