ajax를 사용하여 자동 제안 텍스트 상자 만들기

Question

ajax를 사용하여 자동 제안 텍스트 상자를 만들고 싶습니다. 문자를 작성한 후 이메일 주소를 반환합니다. DB의 문자로 시작합니다. 그것은 JSP로 개발되어야합니다. 누구든지 아이디어가있을 수 있습니까? 다음과 같이

Answer 1

할 일을 :

자바 스크립트 :

function getValue(str){ 
    if (window.XMLHttpRequest) 
    { 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    { 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
url = url +"?" +str; 
xmlhttp.open("POST",url_to_get_db_data,false); 
xmlhttp.send(null); 
document.getElementById('id_of_div').innerHTML=xmlhttp.responseText; 
document.getElementById('id_of_div').style.display = "block"; 
} 

및 HTML에서 :

<input onkeypress="getValue(this.value)"/> //--- this will be your input text 
<div id="id_of_div" style="display:none;"> //--- this is your autosuggest box which will appear down to textbox. Use css to show it at proper location. 
</div> 

형식으로 귀하의 사업부는 자동 제안 상자처럼 보이게합니다. 이를 달성하려면 css을 사용하십시오. 또한

사용자는 다음과 같이 데이터베이스 목록이 할 얻을 때 서버 측에서 document.getElementById('id_of_div').style.display = "none";

편집

을 다음 않는 자동 제안 상자 호출 자바 스크립트 함수에서 하나의 옵션을 선택할 때 :

for(Iterator it=db_list.iterator();it.hasNext();) 
    { 
     Object obj = (Object) it.next(); 
     String value = obj.getValue(); 
     out.print(value+"<br>"); 
    } 

희망이 도움이됩니다.

Answer 2

jQuery UI와 함께 제공되는 autocomplete plugin을 살펴 보는 것이 좋습니다.

그들의 작동 방식을 보여주는 official demo을보십시오.

Answer 3

웹 응용 프로그램과 jquery UI를 통합 해 보셨습니까? 내가 더 이해 내 질문을 편집 한 : JQuery와 UI가 자동 완성/제안 플러그인 http://docs.jquery.com/Plugins/autocomplete

그것은 아약스이며, 당신이해야 할 모든 단지 단어