AJAX 自动完成

Question

我有一个 AJAX 自动完成表单。在遇到许多问题后，它可以工作。\n 但是我需要解决三个问题的帮助。

\n\n

\n

1. 如果用户键入并显示结果，如果用户退格，\n结果将保留在schoollist. 如果 \nsearchbox 为空，如何清除schoollist。

\n

2. 有些单词包含 \xc3\xab 等字母。当从数据库检索时，\n它显示 \xe2\x96\xa0 而不是 \xc3\xab。

\n

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

\n

\n\n

超文本标记语言

\n\n

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

\n\n

阿贾克斯

\n\n

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

\n\n

PHP

\n\n

if (isset($_GET[\'term\'])){\n$return_arr = array();\n\ntry {\n    $conn = new PDO("mysql:host=".DB_SERVER.";port=8889;dbname=".DB_NAME, DB_USER, DB_PASSWORD);\n    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);\n\n    $stmt = $conn->prepare(\'SELECT School FROM Schools WHERE School LIKE :term\');\n    $stmt->execute(array(\'term\' => \'%\'.$_GET[\'term\'].\'%\'));\n\n    while($row = $stmt->fetch()) {\n        $return_arr[] =  $row[\'School\'];\n    }\n\n} catch(PDOException $e) {\n    echo \'ERROR: \' . $e->getMessage();\n}\n\n\n/* Toss back results as json encoded array. */\necho json_encode($return_arr);\n}\n

\n\n

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

\n

Answer 1

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

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

3-如果没有找到结果，为了防止点击事件，您必须使用off 方法：

$('#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();  
}