AJAX：如何使字段的标签和值不同？答案

【问题标题】：AJAX: How do I get the label and value of a field to be different?AJAX：如何使字段的标签和值不同？
【发布时间】：2017-08-25 06:21:02
【问题描述】：

我有以下两个文件。
如何让 AJAX 填充标签和值

例如，如果值为伊利诺伊州芝加哥。如何在提交表单时获得只有芝加哥的价值？

字段下方填充为，例如，伊利诺伊州芝加哥

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:600px;">
   <h2 align="center"></h2>
   <br /><br />
   <label>Search Country</label>
   <input type="text" name="city" id="city" class="form-control input-lg" autocomplete="off" placeholder="Type City Name" />
  </div>
 </body>
</html>

<script>
$(document).ready(function(){

 $('#city').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url:"TypeaheadTest2.php",
    method:"POST",
    data:{query:query},
    dataType:"json",
    success:function(data)
    {
     result($.map(data, function(item){
      return item;
     }));
    }
   })
  }
 });

});
</script>

下面是文件TypeaheadTest2.php

<?php
$connect = mysqli_connect("localhost", "", "", "");
$request = mysqli_real_escape_string($connect, $_POST["query"]);
$query = "
 SELECT * FROM state WHERE state LIKE '".$request."%' OR city LIKE '%".$request."%'
";

$result = mysqli_query($connect, $query);

$data = array();

if(mysqli_num_rows($result) > 0)
{
 while($row = mysqli_fetch_assoc($result))
 {
  $data[] = $row['city'] . ' ' . $row['state'];
 }
 echo json_encode($data);
}

?>

【问题讨论】：

标签： php mysql ajax

【解决方案1】：

如果我说对了，那么您就非常接近您的预期。

我看到您在服务器端连接城市和州名。但您只想在预输入选项中显示城市名称。

我建议您将城市名称和州名作为 PHP 对象的单独属性传递，然后在 Javascript 端根据需要使用它们。

这里是示例代码， PHP：

<?php
    $connect = mysqli_connect("localhost", "", "", "");
    $request = mysqli_real_escape_string($connect, $_POST["query"]);
    $query = "
        SELECT * FROM state WHERE state LIKE '".$request."%' OR city LIKE '%".$request."%'
    ";

    $result = mysqli_query($connect, $query);

    $data = array();

    if(mysqli_num_rows($result) > 0){
        while($row = mysqli_fetch_assoc($result)){
            $data[] = array('city'=>$row['city'], 'state'=>$row['state']);
        }
        echo json_encode($data);
    }

?>

Javascript：

$(document).ready(function(){

    $('#city').typeahead({
        source: function(query, result) {
            $.ajax({
                url:"TypeaheadTest2.php",
                method:"POST",
                data:{query:query},
                dataType:"json",
                success:function(data) {
                    result($.map(data, function(item){
                        return item.city;
                    }));
                }
            });
        }
    });

});

【讨论】：