Question

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

如果用户输入了类型和结果，如果用户退格，则结果保留在schoollist。如何清除schoollist 搜索框if为空。
有些单词包含ë等字母。从中检索时数据库显示■而不是ë。
如果没有结果，则会显示“未找到学校”。如果您点击未找到的学校，它会接受答案。我阻止点击“未找到学校？

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中，并尝试将响应的内容类型标题设置为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();  
}

Answer 2

对于1.问题：

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

对于2.问题：

您的数据库可能包含无效的字符集。尝试使用utf8_general_ci。

对于3.问题：

如果您找到学校列表然后输入从服务器到#schoollist的响应，我建议这样做 - 就像现在一样。否则，如果找不到学校，则传递一个字符串，例如'notFound'。然后：

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

AJAX自动完成

2 个答案:

对于1.问题：

对于2.问题：

对于3.问题：