2016-10-21 2 views
0

나는 Perl cgi-bin을 사용하여 만든 매우 간단한 웹 사이트를 가지고 있습니다. 내 작은 회사의 모든 응용 프로그램 코드를 표시하는 하나의 양식 필드가 있습니다. 응용 프로그램 목록이 작기 때문에 간단한 드롭 다운 목록을 사용했습니다. 그러나 응용 프로그램 수가 증가함에 따라 드롭 다운이 관리하기 어려워지고 있습니다. Perl cgi를 사용하여이 필드에 자동 완성 기능을 사용할 수 있습니까?Perl cgi-bin auto complete

편집 : 응용 프로그램 이름은 데이터베이스 테이블에 저장됩니다. 데이터베이스에서 응용 프로그램 목록을 가져옵니다.

답변

1

혼자 Perl-CGI 할 수 없습니다.

CGI 스크립트에서 javascript를 사용해보세요. 그때 입력 태그의 값을 얻을

<form> 
    <input type="text" id="someid" onkeyup="myfunc()" style="width:150px"/> 
     <div id='auto_div' style="position:absolute; width:150px; height:100px;"> 
     </div> 
</form> 

자바 스크립트 AJAX 호출

function myfunc() 
{ 
    var val = document.getElementById("someid").value; 


    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      var res = xmlhttp.responseText;   
      document.getElementById("auto_div").innerHTML= res; 
     } 
    } 

    xmlhttp.open("GET","database.pl?input_value="+val,true); 
    xmlhttp.send(); 
} 

트리거마다의 keyup (onkeyup())에 myfunc 기능

HTML 코드 아래의 샘플 HTML과 자바 스크립트를 추가했습니다. 이어서 HTML5 자동 완성 드롭 다운, <datalist>위한 간지 태그를 갖는 auto_div

3

에 conent를 다음 res 변수에 저장 기록 할 출력 결과를 통한 Ajax 펄 파일 접속 DB에서 값을 전달한다. <datalist> 태그가 <input> 요소 미리 정의 된 옵션 목록을 지정

정의 및 사용 : 다음은이 w3schools.com에 발견 태그의 사용 정의입니다.

<datalist> 태그는 요소에 "자동 완성"기능을 제공하는 데 사용됩니다. 사용자는 데이터 입력시 미리 정의 된 옵션의 드롭 다운 목록을 볼 수 있습니다.

<input> 요소의 목록 특성을 사용하여 <datalist> 요소와 함께 바인딩합니다.

코드 예 :

자세한 내용
<input list="browsers"> 

<datalist id="browsers"> 
    <option value="Internet Explorer"> 
    <option value="Firefox"> 
    <option value="Chrome"> 
    <option value="Opera"> 
    <option value="Safari"> 
</datalist> 

enter image description here

,이 링크를 참조 : http://www.w3schools.com/tags/tag_datalist.asp

+0

@Atwal 좋아도. DB에서 가져 오는 방법은 무엇입니까? – mkHun

+0

AJAX 호출을 사용하여 HTTP 요청을하는 것이 올바른 방법입니다. 아래 답변을 확인하십시오 : http://stackoverflow.com/questions/29204934/how-to-populate-dependable-drop-down-using-ajax-and-php –

+4

AJAX를 사용하는 이유는 무엇입니까? 목록이 작지만 드롭 다운이 발생하지 않을 경우 몇 킬로바이트 미만이라고 말할 수 있습니다. ''요소 전체를 빌드하는 데 아무런 해가 없습니다. 백엔드에있는 모든 파일은 '

관련 문제