AJAX自动完成

Question

I have an AJAX autocomplete form. After many issues it works. However I need help with three issues.

1. If the user type and result display, if the user backspace, the results remain in schoollist. How do I clear schoollist searchbox if is empty.

2. Some of the words contain letters like ë. When retrieved from the database it display a ■ instead of ë.

3. If there is no results, it will display "School not found". If you click on school not found, it accepts the answer. I prevent clicking on "School not found?

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- I think a simple empty before your AJAX call will solve the problem: $('#schoollist').empty();

2- Use <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> In your html, and also try to set the content type header of your response to utf-8 Like this: header('Content-Type: text/html; charset=utf-8');

3- To prevent click event if no result found you have to use 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();  
}