입력 필드에 문자를 입력 할 때 자동 제안됩니까?

거대한 양의 선택을 압축 할 수있는 드롭 다운 목록, div (들) 또는 원하는 위치의 모든 문자 바로 뒤에서 즉시 끌 수있는 시스템 (위치)의 도시 및 기타 물건에 대한 거대한 데이터베이스가 있습니다 해당 입력 필드에 입력됩니다.입력 필드에 문자를 입력 할 때 자동 제안됩니까?

질문을 제출할 때 여기에 태그를 추가하는 것과 비슷합니다. 그래서 우리가 "L"을 입력하면 런던과 라치오가 "La"다음에 나열 될 것입니다 - 라지오 만 사용할 수 있습니다.

모든 단계 또는 멋진 예 이것을 수행하는 방법은 무엇입니까? 나 자신 그러나 시끄러운 무엇인가 시원한 것을 찾으려고 노력했다. jquery를 사용하고 있습니다.

출처

2011-12-14 Xfile

나는 jQuery를위한 몇 가지 자동 완성 플러그인이 있다고 생각합니다. – Pointy

[jQuery UI autocomplete] (http://jqueryui.com/demos/autocomplete/)를 참조하십시오. –

이 될 수없는 최고의 sollution로 공급하지만 내 사이트에서 작동합니다. 이 스크립트는 사용자가 이전에 입력 한 주와 도시에 따라 거리 이름 자동 완성을 구현합니다. 이 특정 코드는 "keyup"이벤트를 수신합니다. 사용자가 둘 이상의 문자를 입력하면 스크립트는 .php 스크립트가 보낸 매개 변수를 분석하고 SQL 쿼리 및 응답을하는 ajax 요청을 시작합니다. 사용자가 충분히 운이 좋으면 거리 이름에 대한 제안을 찾으면 id = hintsTable을 사용하여 해당 div를 표시합니다. 자동 완성 옵션에서 입력 필드 값을 대체하고 드롭 다운 목록을 숨기는 각 자동 완성 옵션에 대해 이벤트 리스너 (클릭)를 만듭니다. 도움이되기를 바랍니다.

$("#street input").keyup(function(){             //street enter 
     var input = $('#street input').val(); //we get what user has already entered 
     var code = $('#mregionSelect').val(); //city id 
     if(input.length > 1) 
     { 
      $.ajax({ 
       type  : "POST", 
       url   : "components/com_areas/ajaxhelper.php", 
       data  : "input=" + encodeURIComponent(input) + "&code=" + code, 
       cache  : false, 
      }).done(function(msg){ 
       if(msg.length > 0) 
       { 
        $('#hintsTable').html(msg); //fill drop-down list with auto complete options 
        $('#hints').css('display', 'block'); //show the list 
        $('#hintsTable tr').click(function(){ 
         var hint = this.cells[0].innerHTML; 
         $('#street input').val(hint); 
         $('#hints').css("display", "none"); 
        }) 
       } 
       else 
       { 
        $('#hintsTable').html(''); 
        $('#hints').css('display', 'none'); 
        //$('#findButton').css('display', 'none'); 
       } 
      }) 
     } 
     else 
     { 
      $('#hintsTable').html(''); 
      $('#hints').css('display', 'none'); 
      //$('#findButton').css('display', 'none'); 
     }    
    })

출처

2012-01-27 18:01:51

나는 "keyup"을 다른 방식으로 (PHP 실행 파일을 호출하기 위해) 사용했고 그것은 매력처럼 작동합니다! Thx Sergei :) – Xfile

당신은 사용자가 키 다운 아약스의 도움으로 PHP 스크립트를 호출하도록 코딩 할 수 누를 때 지금

<input name="txtSearch" type="text" onkeydown="jscriptfunc();" autocomplete="off"/>  
<div class="autoDiv"></div> (could use CSS to format the div accordingly)

jscriptfunc에서 사업부와 텍스트 상자를 만들 수 있습니다. 이 PHP 스크립트는 사용자가 지금까지 입력 한 모든 것을 가져 와서 간단한 패턴 일치 검색을 수행합니다.

Select * from table where field like '$input%' limit 5;

그런 다음 우리는 단지 결과를 가지고 사업부

출처

2011-12-14 20:22:46

입력 필드에 문자를 입력 할 때 자동 제안됩니까?

답변

관련 문제