AJAX自动完成

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/

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

For 1. issue:

$(document).ready(function(){
   // I added two new variables:
   var $schoolInput = $('#school');
   var $schoolList = $('#schoollist');

   $schoolInput.on('keyup', function(){  
       var query = $(this).val();  
       if(query != '')  
       {  
            $.ajax({  
                url:"search.php",  
                method:"POST",  
                data:{query:query},  
                success:function(data)  
                {  
                     $schoolList.html(data).fadeIn();  
                }  
           });  
      }
      else { // It's answer for your 1. issue:
          $schoolList.fadeOut().html(''); 
      }
  });

  $(document).on('click', 'li', function(){  
      $schoolInput.val($(this).text());  
      $schoolList.fadeOut();  
  });  
});

For 2. issue:

Probably your database has invalid charset. Try to use utf8_general_ci.

For 3. issue:

I suggest to do this if you find a list of schools then enter the response from the server to #schoollist - that is like now. Otherwise, if no school is found then pass a string such as 'notFound'. And then:

$(document).ready(function(){
   // I added two new variables:
   var $schoolInput = $('#school');
   var $schoolList = $('#schoollist');

   $schoolInput.on('keyup', function(){  
       var query = $(this).val();  
       if(query != '')  
       {  
            $.ajax({  
                url:"search.php",  
                method:"POST",  
                data:{query:query},  
                success:function(data)  
                { 
                     // 3. issue:
                     if(data == 'notFound') {
                         $schoolList.html('<div class="notFound">School not found</div>').fadeIn();
                     }
                     else {  
                         $schoolList.html(data).fadeIn(); 
                     } 
                }  
           });  
      }
      else { // It's answer for your 1. issue:
          $schoolInput.val($(this).text());  
          $schoolList.fadeOut().html(''); 
      }
  });

  $(document).on('click', 'li', function(){  
      $schoolInput.val($(this).text());  
      $schoolList.fadeOut();  
  });  

  // 3. issue
  $(document).on('click', '.notFound', function(){  
      var text = $(this).text();
      $schoolInput.val(text);
  });
});