Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/448.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用自动完成功能输入相互依赖的文本_Javascript_Jquery_Html_Input_Autocomplete - Fatal编程技术网

Javascript 使用自动完成功能输入相互依赖的文本

Javascript 使用自动完成功能输入相互依赖的文本,javascript,jquery,html,input,autocomplete,Javascript,Jquery,Html,Input,Autocomplete,我已经创建了两个输入文本,一个是ID,另一个是Name。如果我在第一个输入文本中键入ID,然后按tab键或单击第二个输入文本(在HTML中使用onfocusout),第二个输入文本将自动填充分配给该ID的名称。例如,键入ID“001”将显示“Elnora”。同样,在第二个输入文本中键入'Soo'(然后按tab键)将在第一个输入文本中显示'010'。基本上,它是基于索引编号的一对一映射。正如你在我的文章中所看到的那样,这是完美无瑕的 然而,由于不是每个人都记得任何人的ID和/或姓名,我也想实现一个

我已经创建了两个输入文本,一个是ID,另一个是Name。如果我在第一个输入文本中键入ID,然后按tab键或单击第二个输入文本(在HTML中使用onfocusout),第二个输入文本将自动填充分配给该ID的名称。例如,键入ID“001”将显示“Elnora”。同样,在第二个输入文本中键入'Soo'(然后按tab键)将在第一个输入文本中显示'010'。基本上,它是基于索引编号的一对一映射。正如你在我的文章中所看到的那样,这是完美无瑕的

然而,由于不是每个人都记得任何人的ID和/或姓名,我也想实现一个自动完成功能,这样每当有人键入ID/姓名时,就会出现一个建议的ID/姓名列表。我正在尝试使用JQueryUI自动完成作为我的另一个。自动完成功能可以工作,但按tab键/单击其他输入文本不会显示其他指定的配对

 $( function() {
     "use strict";

var scholaridlists = ["001","002","003","004","005","006","007","008","009","010"];
$( "#currentscholaridlist" ).autocomplete({      source: scholaridlists, minLength:3, maxShowItems:5    });


   var scholarlists = ["Elnora","Henry","Scotty","Bruna","Shirley","Modesto","Lissa","Davida","Margherita","Soo"];
  $( "#currentscholarlist" ).autocomplete({      source: scholarlists, minLength:3, maxShowItems:5    });

} ); 

 function idtoname() {
    var ids1=document.getElementById("currentscholaridlist").value;
    var a = scholaridlists.indexOf(ids1);
    var ids2= a;
    document.getElementById("currentscholarlist").value =scholarlists[ids2];
}

 function nametoid() {
    var names1=document.getElementById('currentscholarlist').value;
    var b = scholarlists.indexOf(names1);
    var names2 = b;
    document.getElementById('currentscholaridlist').value = scholaridlists[names2];
} 
如果有人对此问题有解决方案,我希望使用select/option将Ids/names数组列表保留在JS中,而不是HTML中。此外,ID不一定是数字,也不一定是JSFIDLE中所示的字母/编号顺序(我可以使用A123、SC001A等ID)


提前谢谢

这里有一些需要做的更改

使用

HTML

<input type="text" id="currentscholaridlist" onblur="idtoname()">
<br/>
<input type="text" id="currentscholarlist" onblur="nametoid(this)">
<br/>

哇,没想到解决方案这么简单。非常感谢@brk!无论如何,之前我确实尝试过将阵列移到外面,但没有成功。也许这和onblur和onfocusout有关?另外,出于好奇,如果您碰巧知道,为什么idtoname()在括号内没有“this”而不是nametoid(this)?抱歉,我对这个JS/HTML东西还不太熟悉。再次感谢!
<input type="text" id="currentscholaridlist" onblur="idtoname()">
<br/>
<input type="text" id="currentscholarlist" onblur="nametoid(this)">
<br/>
   var scholaridlists = ["001", "002", "003", "004", "005", "006", "007", "008", "009", "010"];
   var scholarlists = ["Elnora", "Henry", "Scotty", "Bruna", "Shirley", "Modesto", "Lissa", "Davida", "Margherita", "Soo"];
   $(function() {
      // Rest of the code
   });

   function idtoname() {
     // rest of the code
   }

   function nametoid() {
     // rest of the code
   }