javascript를 사용하여 자동 완성_javascript 기술과 유사한 IE의 양식 자동 완성을 모방합니다.

최근에 자바스크립트 프레임워크를 작성하다가 인터넷에서 자동완성 기능이 있는 양식을 많이 봐서, 프레임워크에 색을 추가하기 위해 임의로 자바스크립트로 하나 작성해봤습니다. >단계
:
1. 두 개의 매개변수를 전달합니다. 첫 번째는 바인딩하려는 양식 객체이고, 두 번째는 검색하려는 배열입니다. 2. 자동으로 완료하고 속성과 이벤트를 설정하고 싶습니다. (저는 여기에서 div의 표시 및 표시 속성을 설정하지 않았지만 왼쪽을 "-1000px"로 설정하여 브라우저 밖으로 이동하고 숨겨진 효과를 얻었습니다. 3. 들어오는 배열을 검색하고, 입력 내용과 일치하거나 유사한 항목을 찾아 새 배열에 저장합니다. 여기서 정규식을 사용하여 4번의 반복을 수행했습니다.
4. 검색된 데이터가 저장된 새 배열을 처리하고 중복된 내용이 있는 항목을 제거한 후 div에 씁니다.
5. div의 왼쪽, 위쪽 및 너비를 설정합니다. 아래 제공된 전체 코드를 살펴보세요
:



코드 복사

코드는 다음과 같습니다. if(!sx) var sx={}; sx.activex={}; sx.activex.autocomplete={

bind:function(a, s){

var d=document.createElement("div");
d.style.position="absolute";
d.flag="autocomplete"
document.body.appendChild(d);
d.style.left="-1000px";
d.style.height="100px";
d.style.overflow="auto"
a.onblur =function() {
if(document.elementFromPoint(window.event.clientX,window.event.clientY).flag=="autocomplete" || document.elementFromPoint(window.event.clientX,window.event.clientY).parentNode. flag=="autocomplete")
return;
d.innerHTML="";
d.style.left="-1000px";
}
a.onkeyup =function() {
if(a.value=="") {
d.innerHTML="";
return;
}
d.innerHTML=""; [];
for(var i in s){
if(eval("/^" a.value "$/i").test(s[i])){
t.push (s[i]);
}
}
for(var i in s){
if(eval("/^" a.value ". $/i" ).test( s[i])){
t.push(s[i]);
}
}
for(var i in s){
if(eval( "/^. " a.value "$/i").test(s[i])){
t.push(s[i]);
}
}
for( var i in s ){
if(eval("/^. " a.value ". $/i").test(s[i])){
t.push(s[i])
}
}
for(var e=0;e<=t.length-2;e ){
for(var e1=e 1;e1<=t.length-1 ;e1 ){
if(t[e]==t[e1]){
for(var e2=e1 1;e2if(t[e2] ){
t[e2-1]=t[e2];
}
}
t.length=t.length-1;
}
}
/ /alert(t);
for(var i in t){
var p=document.createElement("div")
p.innerText=t[i]
p.onmouseenter =function(){
this.style.BackgroundColor="blue";
}
p.onmouseleave=function(){
this.style.BackgroundColor="
}
p.onclick=function(){
a.value=this.innerText;
d.style.left="-1000px";
}
d.appendChild(p)
}
d.style.top=a.offsetTop a.offsetHeight "px";
d.style.left=a.offsetLeft "px"
d.style.width =a.offsetWidth "px";
}
}
}.


라는 HTML 코드:



코드 복사

코드는 다음과 같습니다.