목록의 내용을 변경하는 AJAX 검색 상자

Question

AJAX를 사용하는 검색 상자를 사용하여 목록의 내용을 변경하는 방법을 알 수 없습니다.

기본적으로 꿈은 사용자가 상자에 검색어를 입력하게하고 아래 목록이 제목이 검색어와 일치하는 항목이 포함되도록 변경됩니다.

아래 스크린 샷이 도움이 될 수 있습니다. 당신은 단지 출발점을 찾고 있기 때문에

Answer 1

, 그것의 의미를 만들기 위해 다음의 간단한 단계를 따르십시오.

1. 당신은 항목이 입력을 기반으로 데이터베이스에서 나열하는 입력 쿼리로, 어떤 사용자 유형, 소요됩니다 PHP에서 코드 블록 (바람직 함수)를 작성해야합니다.

2. 다음으로 PHP에서 HTML을 준비하거나 브라우저에 응답 할 필요가있는 경우 쿼리에서 검색된 출력을 루프 처리하고 구조를 수정해야합니다.

3. 지금 아약스 호출 (이 참조 - http://api.jquery.com/jQuery.ajax/)을 수행하는 PHP 코드 블록에를, 이벤트 키를 누를 때에 jQuery를 사용하고있을 수 있습니다 (- http://api.jquery.com/keypress/이 참조).

4. 새로받은 데이터로 이전 목록을 바꿉니다.

귀하의 워크 플로가 무엇인지 생각해보십시오. 이 모든 것에 대한 코드를 붙여 넣으면 답이 정말로 길어집니다. 그래서 단지 일의 흐름.

PHP (ajaxcall.php) :

<?php 

//The following code block will be executed on the ajax call. 


//get the user input from post 
$user_input = $_POST['user_input']; 

//do the query based on that. 
//YOUR SQL HERE 

//parse the retrieved result and loop through it. 

//echo out the output. 

die(); 

JS :

는

$('.somefield').keypress(function(){ 
    //get the current value of some field and set this as the data to be sent. 
    //do your ajax call. 
    //on success(after successfully getting the data), replace the content of 
    //the list with the new data. 
});