실시간 검색 결과 표시 AJAX

Question

내 데이터베이스의 모든 결과를 보여주는 페이지가 있습니다. 페이지의 결과를 필터링하는 데 사용하는 페이지에 체크 상자와 텍스트 상자가 있습니다.

확인란이 작동하므로 텍스트 상자를 선택하면 페이지의 결과가 라이브로 필터링됩니다. 이제 나는 텍스트 상자에 대해서도 같은 것을 원하지만 im은 어떻게 처리 할 것인가.

이것은 텍스트 상자에 사용하려는 텍스트 상자에 대한 내 코드입니다.

<script> 
function makeTable(data) { 
    var tbl_body = ""; 
    $.each(data, function() { 
     var tbl_row = ""; 
     $.each(this, function(k , v) { 
      tbl_row += "<td>"+v+"</td>"; 
     }) 
     tbl_body += "<tr>"+tbl_row+"</tr>"; 
    }) 
    return tbl_body; 
} 

function getEmployeeFilterOptions(){ 
    var opts = []; 
    $checkboxes.each(function(){ 
     if(this.checked){ 
      opts.push(this.name); 
     } 
    }); 
    return opts; 
} 

function updateEmployees(opts){ 
    $.ajax({ 
     type: "POST", 
     url: "submit.php", 
     dataType : 'json', 
     cache: false, 
     data: {filterOpts: opts}, 
     success: function(records){ 
      $('#employees tbody').html(makeTable(records)); 
     } 
    }); 
} 

var $checkboxes = $("input:checkbox"); 
$checkboxes.on("change", function(){ 
    var opts = getEmployeeFilterOptions(); 
    updateEmployees(opts); 
}); 

updateEmployees(); 

</script> 

나는 당신의 submit.php의 작품,하지만 난 당신이 "filterOpts"올바른 JSON이 반환 될 때 키워드를 보낼 수있는 가정하는 방법을 잘 모르겠습니다

<?php 
$pdo = new PDO('mysql:host=localhost;dbname=records', 'root', '***'); 
$select = 'SELECT *'; 
$from = ' FROM overboekingen'; 
$opts = (isset($_POST['filterOpts']) ? $_POST['filterOpts'] : FALSE); 

    if (is_array($opts)) { 

    $where = ' WHERE FALSE'; 

    if (in_array("medewerker", $opts)){ 
    $where .= " OR medewerker = 1 "; 
    } 
    if (in_array("medewerker1", $opts)){ 
    $where .= " OR medewerker = 2 "; 
    } 
    if (in_array("medewerker2", $opts)){ 
    $where .= " OR medewerker = 3 "; 
    } 
    if (in_array("medewerker3", $opts)){ 
    $where .= " OR medewerker = 4 "; 
    } 
    if (in_array("medewerker4", $opts)){ 
    $where .= " OR medewerker = 5 "; 
    } 
    if (in_array("medewerker5", $opts)){ 
    $where .= " OR medewerker = 6 "; 
    } 
    if (in_array("medewerker6", $opts)){ 
    $where .= " OR medewerker = 7 "; 
    } 
    if (in_array("medewerker7", $opts)){ 
    $where .= " OR medewerker = 8 "; 
    } 
    if (in_array("medewerker8", $opts)){ 
    $where .= " OR medewerker = 9 "; 
    } 
    if (in_array("medewerker9", $opts)){ 
    $where .= " OR medewerker = 10 "; 
    } 
    if (in_array("medewerker10", $opts)){ 
    $where .= " OR medewerker = 11 "; 
    } 

else { 
$where = false;  
} 

$sql = $select . $from . $where; 
$statement = $pdo->prepare($sql); 
$statement->execute(); 
$results = $statement->fetchAll(PDO::FETCH_ASSOC); 
$json = json_encode($results); 
echo($json); 
?> 

Answer 1

PHP? 이것이 맞다면 사용자가 입력 필드를 변경하고 매번 입력 값을 보낼 때마다 AJAX 호출을 할 수 있습니다 :

첫 번째 코드 블록은 'input'요소가 변경 될 때마다 updateEmployeesText 함수를 간단하게 호출합니다 (기본적으로 사용자가 입력 할 때마다). 매개 변수로 $ (this) .val을 전달합니다.이 매개 변수는 텍스트 상자 안에있는 텍스트입니다.

$('input').change(function(){ 
    updateEmployeesText($(this).val()); 
}); 

이 코드 블록은 submit.php를 비동기 적으로 호출합니다. 텍스트 상자의 값을 POST 매개 변수로 전달합니다. submit.php가 반환 된 후, success 함수가 실행되고 테이블이 업데이트됩니다.

function updateEmployeesText(val){ 
    $.ajax({ 
     type: "POST", 
     url: "submit.php", 
     dataType : 'json', 
     cache: false, 
     data: {text: val}, 
     success: function(records){ 
      $('#employees tbody').html(makeTable(records)); 
     } 
    }); 
} 

PHP에서는 $ val = $ _POST [ 'text']를 사용하여이 값을 얻을 수 있습니다. 이것은 DB에서 검색하려는 문자열입니다. 나는 아래의 단계를 설명했다 :

1. (아직) PDO를 구축
2. 이제 '%을 좋아 your_field WHERE your_table로부터 SELECT *를 사용합니다. $ val. % 'OR ... (계속 진행할 수 있습니다)
3. 참고 : 시작과 끝의 %는 부분 검색이므로 아무런 값이 반환되지 않습니다.
4. 이제 문을 실행하고 배열을 가져옵니다
5. 배열을 JSON으로 인코딩하고 반환하십시오!

희망이 있습니다.

EDIT for PHP : 이 코드 블록은 위에서 설명한대로 모든 작업을 수행합니다. SQL LIKE 문에서 사용 된 부분 검색에 유의하십시오. %는 $ val 앞뒤에 와일드 카드 문자를 나타냅니다. 예를 들어 값이 'cat'이라면 스크립트는 % cat %를 검색하여 bcat, cat, fcatr, fggcatrr 등의 결과를 반환합니다. cat으로 끝나는 스크립트를 원한다면 '% cat'(% $ val)을 사용하고 cat으로 시작되는 것을 원한다면 'cat %'(% $ val)을 사용하십시오.

$pdo = new PDO('mysql:host=localhost;dbname=records', 'root', '***'); 
$select = 'SELECT *'; 
$from = ' FROM overboekingen'; 
$val = $_POST['val']; 
$where = "WHERE medewerker LIKE '%$val%'; 
$sql = $select . $from . $where; 
$statement = $pdo->prepare($sql); 
$statement->execute(); 
$results = $statement->fetchAll(PDO::FETCH_ASSOC); 
$json = json_encode($results); 
echo($json); 

Answer 2

요점이 맞는지 모르겠 으면 입력란과 체크 상자에 아약스 라이브 기능을 추가하고 싶습니까?

그렇다면, 나는 내 submit.php을 추가 한

$('yourinputselector').keyup(function() { 

    var user_input = $(this).val(); 
    if (user_input.length > 3) // or any min-chars number 
    { 
     // process your ajax request here 
    } 

});