Ajax 검색 표시 줄 에 입력 할 때의 자동 알림 기능 구현

jQuery(Ajax)/PHP/MySQL 을 사용 하여 자동 완성 기능 구현
JavaScript 코드:

<script src="jquery-1.2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">

function lookup(inputString) {
    if(inputString.length == 0) {
        // Hide the suggestion box.
        $(‘#suggestions’).hide();
    } else {
        $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $(‘#suggestions’).show();
                $(‘#autoSuggestionsList’).html(data);
            }
        });
    }
} // lookup

function fill(thisValue) {
    $(‘#inputString’).val(thisValue);
   $(‘#suggestions’).hide();
}

</script>

 
JS 의 설명:
 자,위의 코드 를 보면 rpc.php 라 는 파일 에 연결 해 야 합 니 다.이 파일 은 모든 작업 을 처리 합 니 다.
lookup 함 수 는 텍스트 입력 상자 에서 얻 은 단 어 를 사용 하고 jQuery 에서 Ajax 의 방법 POST 를 사용 하여 rpc.phop 에 전달 합 니 다.
입력 문자'input String'이'0'(Zero,번역 주:검색 상자 에 아무 내용 도 입력 하지 않 았 다 는 뜻)이 라면 제안 상자 가 숨겨 집 니 다.이것 도 인성 화 됩 니 다.검색 상자 에 아무 것 도 입력 하지 않 았 다 면 제안 알림 상자 가 나타 날 것 이 라 고 생각 하지 않 습 니 다.
입력 상자 에 내용 이 있 으 면 이'input String'을 얻 고 rpc.phop 페이지 에 전달 한 다음 jQuery 의$.post()함수 가 사 용 됩 니 다.다음 과 같 습 니 다.

$.post(url, [data], [callback])

'callback'부분 은 함수 와 연결 할 수 있 습 니 다.이것 은 비교적 재 미 있 습 니 다.데이터(data)가 불 러 올 때 만 실 행 됩 니 다.
돌아 오 는 데이터(data)가 비어 있 지 않 으 면 html 코드 대신 검색 알림 상 자 를 표시 하고 돌아 오 는 데이터(data)를 사용 합 니 다.
이렇게 간단 해!
PHP 백 엔 드 프로그램(rpc.php):
알다 시 피(번역 주:죄송합니다.왕 소 파 를 보면 이런 말버릇 을 배 웠 습 니 다)제 phop 백 스테이지 프로그램 은 모두 rpc.phop(RPC 는 원 격 프로 세 스 호출 을 말 합 니 다)이 라 고 부 릅 니 다.실제 실 행 된 기능 으로 이름 을 짓 지 않 았 지만 괜 찮 습 니 다.

  

// PHP5 Implementation - uses MySQLi. 
$db = new mysqli(‘localhost’, ‘root’ ,”, ‘autoComplete’);
if(!$db) {
    // Show error if we cannot connect.
    echo ‘ERROR: Could not connect to the database.’;
} else {
    // Is there a posted query string?
    if(isset($_POST[‘queryString’])) {
        $queryString = $_POST[‘queryString’];
        // Is the string length greater than 0?
        if(strlen($queryString) >0) {
        // Run the query: We use LIKE ‘$queryString%’
        // The percentage sign is a wild-card, in my example of countries it works like this…
        // $queryString = ‘Uni’;
        // Returned data = ‘United States, United Kindom’; 
        $query = $db->query("SELECT value FROM countries WHERE value LIKE ‘$queryString%’ LIMIT 10");
        if($query) {
            // While there are results loop through them - fetching an Object (i like PHP5 btw!).
            while ($result = $query ->fetch_object()) {
                // Format the results, im using <li> for the list, you can change it.           
                // The onClick function fills the textbox with the result.
                echo ‘<li onclick="fill(’‘.$result->value.’‘);">’.$result->value.‘</li>’;
            }
        } else {
            echo ‘ERROR: There was a problem with the query.’;
        }
    } else {
        // Dont do anything.
    } // There is a queryString.
} else {
    echo ‘There should be no direct access to this script!’;
}
}

?>

 
PHP 코드 설명:
코드 에 나 는 이미 많은 주석 을 넣 었 음 을 감안 하여 여기 서 나 는 더 이상 상세 하 게 말 하지 않 겠 다.
일반적으로 이'Query String'을 받 은 다음 마지막 에 마스크 를 사용 하여 검색 어 를 만들어 야 합 니 다.
이 는 이러한 상황 에서 한 글 자 를 입력 할 때마다 검색 어 를 만들어 야 한 다 는 뜻 이다.계속 이렇게 하면 MYSQL 이 견 딜 수 없 을 것 같다.그러나 이 과정 을 최대한 간소화 하기 위해 서 는 규모 가 작은 응용 에 문제 가 없 을 것 이다.
이 phop 코드 는 자신의 시스템 에서 약간 수정 해 야 합 니 다.예 를 들 어'$query'를 자신의 데이터 베 이 스 를 업데이트 해 야 합 니 다.데이터베이스 시트 의 열 이름 을 어디 에 두 는 지 봐 야 합 니 다.
CSS 스타일:
저 는 CSS 3 를 사 용 했 습 니 다.어 머,정말 좋 습 니 다.Firefox 나 Safari 브 라 우 저 에 기능 제한 이 있 지만.

  

<style type="text/css"> 
.suggestionsBox {
    position: relative;
    left: 30px;
    margin: 10px 0px 0px 0px;
    width: 200px;
    background-color: #212427;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 2px solid #000;
    color: #fff;
}

.suggestionList {
    margin: 0px;
    padding: 0px;
}

.suggestionList li {
    margin: 0px 0px 3px 0px;
    padding: 3px;
    cursor: pointer;
}

.suggestionList li:hover {
    background-color: #659CD8;
}
</style>

 
CSS 코드 는 모두 표준적 이어서 특별히 지적 할 필요 가 없다.
주 파일 HTML:

  

<div> 
       <div>

      Type your county (for the demo):
<input size="30" id="inputString" onkeyup="lookup(this.value);" type="text" />

    </div>      <div class="suggestionsBox" id="suggestions" style="display: none;">

      <img src="upArrow.png" style="position: relative; top: -12px; left: 30px" alt="upArrow" />

      <div class="suggestionList" id="autoSuggestionsList">

</div>

    </div>

</div>

 
이것 은 주 파일 의 일부 html 코드 입 니 다.추가 해 야 할 것 은 입력 상자 이 며,'onkeyup'함 수 를 lookup(this.value)으로 설정 합 니 다.또한,나 는 당신 이 그것 의 ID 를 수정 하지 않 기 를 건의 합 니 다.만약 당신 이 위의 자바 script 코드 를 수정 하고 싶 지 않다 면.
캡 처:
마지막 효과 가 어떤 지 보고 싶 을 것 같 아,OK.
시연
에서