javascript - AJAX 自动完成

Question

我有一个 AJAX 自动完成表单。在许多问题之后它起作用了。 但是我需要三个问题的帮助。

1. 如果用户键入和结果显示，如果用户退格，则结果保留在 schoollist 中。如何清除 schoollist搜索框是否为空。

2. 有些单词包含 ë 等字母。当从它显示 ■ 而不是 ë 的数据库。

3. 如果没有结果，会显示“找不到学校”。如果您单击未找到的学校，它会接受答案。我阻止点击“找不到学校？”

HTML

<div class="ui-widget">
<label>What school does the child attend<input  type="text" name="school" id="school" class="form-control" placeholder="Enter school Name"/></label>
<div id="schoollist"></div>  
</div>

Ajax

   $(document).ready(function(){  
   $('#school').keyup(function(){  
       var query = $(this).val();  
       if(query != '')  
       {  
            $.ajax({  
                 url:"search.php",  
                 method:"POST",  
                 data:{query:query},  
                 success:function(data)  
                 {  
                      $('#schoollist').fadeIn();  
                      $('#schoollist').html(data);  
                 }  
            });  
       }  
  });  
  $(document).on('click', 'li', function(){  
       $('#school').val($(this).text());  
       $('#schoollist').fadeOut();  
  });  
 });  

PHP

if (isset($_GET['term'])){
$return_arr = array();

try {
    $conn = new PDO("mysql:host=".DB_SERVER.";port=8889;dbname=".DB_NAME, DB_USER, DB_PASSWORD);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $stmt = $conn->prepare('SELECT School FROM Schools WHERE School LIKE :term');
    $stmt->execute(array('term' => '%'.$_GET['term'].'%'));

    while($row = $stmt->fetch()) {
        $return_arr[] =  $row['School'];
    }

} catch(PDOException $e) {
    echo 'ERROR: ' . $e->getMessage();
}


/* Toss back results as json encoded array. */
echo json_encode($return_arr);
}

https://jsfiddle.net/47v1t3k4/1/

Answer 1

1- 我认为在您的 AJAX 调用之前简单清空即可解决问题:$('#schoollist').empty();

2- 使用 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">在您的 html 中，还尝试将您响应的内容类型 header 设置为 utf-8，如下所示:header('Content-Type: text/html; charset=utf-8');

3- 要在没有找到结果时阻止点击事件，您必须使用 off method :

$('#school').keyup(function(){  
    var query = $(this).val().trim();  
    $('#schoollist').empty();
    if(query != '')  
    {  
        $.ajax({  
            url:"search.php",  
            method:"POST",  
            data:{query:query},  
            success:function(data)  
            {  
                $('#schoollist').fadeIn();  
                $('#schoollist').html(data);
                if ( data.indexOf("School not found") > -1 ) {
                    // detach click event
                    $(document).off('click', 'li', go);
                } else {
                    // attach click event  
                    $(document).on('click', 'li', go);
                }


            }  
        });  
    }  
});  

function go(){  
    $('#school').val($(this).text());  
    $('#schoollist').fadeOut();  
}