Jquery 自动完成不显示返回的结果_Jquery_Autocomplete_Jquery Ui Autocomplete

Jquery 自动完成不显示返回的结果

jquery autocomplete

Jquery 自动完成不显示返回的结果,jquery,autocomplete,jquery-ui-autocomplete,Jquery,Autocomplete,Jquery Ui Autocomplete,虽然php代码返回json结果，但我无法获得要显示的jquery自动完成的结果。jquery代码如下所示： $("#newName").autocomplete({ source: function(request, response) { $.ajax({ url: root + "/assets/php/autocomplete.php", dataType: "json", data: {

虽然php代码返回json结果，但我无法获得要显示的jquery自动完成的结果。jquery代码如下所示：

$("#newName").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: root + "/assets/php/autocomplete.php",
            dataType: "json",
            data: {
                term : request.term,
                field : "name"
            },
            success: function(data) {
                response(data);
            }
        });
    });

php代码是：

while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
    $row_array['value'] = $row[$field];
    array_push($return_arr,$row_array);
}

echo json_encode($return_arr);

在Firebug中检查结果时，我得到如下响应：

[{“值”：“jdoe”}]

但是，我从未在html页面中看到建议列表。任何关于问题所在的建议

谢谢， AB

你试过这个吗

data: {
    term : request.value,
    field : "name"
},

您的数组键是

'value'

，而不是

'term'

我通过在主css文件中添加一个用于自动完成的z索引样式来修复此问题。现在一切正常

.ui-autocomplete {
z-index: 100;
}

在PHP代码中，尝试更改“标签”的“值”：

while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
    $row_array['label'] = $row[$field];
    array_push($return_arr,$row_array);
}

echo json_encode($return_arr);

我不知道为什么，但这似乎很重要。我将附上为我工作的例子。在我的例子中，我必须通过一个PHP文件从jQuery进行MySQL连接。我想做一个自动完成字段，你可以写一个用户名，当你点击用户名时，相关字段（姓名，姓氏，电子邮件…）被填充。这是我的密码：

HTML代码：

    <html lang="en">
      <head>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"   
      </script>
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

      <!--Here there is my jQuery script-->
      <script type="text/javascript" src="scripts/myjQuery.js"></script>

      <title>EXAMPLE AUTOCOMPLETE</title>
   </head>
   <body>
     <h1>CREATING A NEW CASE</h1>         
     <form id='newcase' action="#" method="POST" name="newcase">      

      <label>Add Nickname </label>
      <input class="input-250" type="text" id="nickname" name="nickname"><br/>

      <label>First Name </label>
      <input class="input-250" type="text" id="firstname" name="firstname"><br/>

      <label>Surname </label>
      <input class="input-250" type="text" id="surn" name="surn"><br/>

      <label>Organisation</label>
      <input  class="input-250"type="text" id="organisation" name="organisation"><br/>

      <label>E-Mail Address </label>
      <input class="input-250" type="text" id="email" name="email"><br/>

    </form>
   </body>
 </html>

    $(document).ready(function(){

      $('#nickname').autocomplete({

       //Here I call the PHP file and the method inside this file, separated by '/'.
       //You should manage it somehow to make this possible.
     //I have managed it whith a PHP file called index.php, that gets whatever it comes 
    //from the URL after the 'rt' and it separates it by the slash,
   //being the first value the name of the file, and the second value the name of the 
   //method.

     source:'index.php?rt=jscallsController/listNicknameUsers', 
     minLength:1,
     select: function(evt, ui)
     {
      // when a username is selected, populate related fields in this form

        document.getElementById('firstname').value = ui.item.firstname;
        document.getElementById('surn').value  = ui.item.surname;
        document.getElementById('organisation').value  = ui.item.org;
        document.getElementById('email').value  = ui.item.mail;
        }
      });
    });

    <?php

    class jscallsController{

    public function listNicknameUsers(){

      $hostdb = 'localhost';
      $namedb = 'tests';
      $userdb = 'username';
      $passdb = 'password';

      $term = trim(strip_tags($_GET['term']));

      $users  = 'table_users';

      $data = array();

     try {
      // Connect and create the PDO object
      $conn = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);

      // Sets encoding UTF-8
      $conn->exec("SET CHARACTER SET utf8");      

      //Define and perform the SQL SELECT query
      $sql = "SELECT u_name, u_fname, u_surname, u_organisation, u_email FROM $users  
              WHERE u_name LIKE '$term%'";
      $result = $conn->query($sql);

      // If the SQL query is succesfully performed ($result not false)
      if($result !== false) {

      // Number of returned rows
      $rows = $result->rowCount();   

      //If exists, returns 1
      if($rows > 0){
          foreach($result as $user) {

          /*The first position of the array needs to be called 'label', 
          otherwise it will not show anything in the HTML field 
          where the autocomplete is done.*/

          $data[] = array(

          'label' => $user['u_name']." (".$user['u_fname']." ".$user['u_surname'].")" ,
          'firstname' =>$user['u_fname'],
           'surname' => $user['u_surname'],
           'org' => $user['u_organisation'],
           'mail' => $user['u_email']
         );
        }
      }
     }
     //Disconnect
     $conn = null;        

     //We send back the array to the jQuery
     echo json_encode($data);
     }
     catch(PDOException $e) {
       echo $e->getMessage();
      }
     }
    }
    ?>

和PHP文件jscallsController.PHP:

    <html lang="en">
      <head>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"   
      </script>
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

      <!--Here there is my jQuery script-->
      <script type="text/javascript" src="scripts/myjQuery.js"></script>

      <title>EXAMPLE AUTOCOMPLETE</title>
   </head>
   <body>
     <h1>CREATING A NEW CASE</h1>         
     <form id='newcase' action="#" method="POST" name="newcase">      

      <label>Add Nickname </label>
      <input class="input-250" type="text" id="nickname" name="nickname"><br/>

      <label>First Name </label>
      <input class="input-250" type="text" id="firstname" name="firstname"><br/>

      <label>Surname </label>
      <input class="input-250" type="text" id="surn" name="surn"><br/>

      <label>Organisation</label>
      <input  class="input-250"type="text" id="organisation" name="organisation"><br/>

      <label>E-Mail Address </label>
      <input class="input-250" type="text" id="email" name="email"><br/>

    </form>
   </body>
 </html>

    $(document).ready(function(){

      $('#nickname').autocomplete({

       //Here I call the PHP file and the method inside this file, separated by '/'.
       //You should manage it somehow to make this possible.
     //I have managed it whith a PHP file called index.php, that gets whatever it comes 
    //from the URL after the 'rt' and it separates it by the slash,
   //being the first value the name of the file, and the second value the name of the 
   //method.

     source:'index.php?rt=jscallsController/listNicknameUsers', 
     minLength:1,
     select: function(evt, ui)
     {
      // when a username is selected, populate related fields in this form

        document.getElementById('firstname').value = ui.item.firstname;
        document.getElementById('surn').value  = ui.item.surname;
        document.getElementById('organisation').value  = ui.item.org;
        document.getElementById('email').value  = ui.item.mail;
        }
      });
    });

    <?php

    class jscallsController{

    public function listNicknameUsers(){

      $hostdb = 'localhost';
      $namedb = 'tests';
      $userdb = 'username';
      $passdb = 'password';

      $term = trim(strip_tags($_GET['term']));

      $users  = 'table_users';

      $data = array();

     try {
      // Connect and create the PDO object
      $conn = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);

      // Sets encoding UTF-8
      $conn->exec("SET CHARACTER SET utf8");      

      //Define and perform the SQL SELECT query
      $sql = "SELECT u_name, u_fname, u_surname, u_organisation, u_email FROM $users  
              WHERE u_name LIKE '$term%'";
      $result = $conn->query($sql);

      // If the SQL query is succesfully performed ($result not false)
      if($result !== false) {

      // Number of returned rows
      $rows = $result->rowCount();   

      //If exists, returns 1
      if($rows > 0){
          foreach($result as $user) {

          /*The first position of the array needs to be called 'label', 
          otherwise it will not show anything in the HTML field 
          where the autocomplete is done.*/

          $data[] = array(

          'label' => $user['u_name']." (".$user['u_fname']." ".$user['u_surname'].")" ,
          'firstname' =>$user['u_fname'],
           'surname' => $user['u_surname'],
           'org' => $user['u_organisation'],
           'mail' => $user['u_email']
         );
        }
      }
     }
     //Disconnect
     $conn = null;        

     //We send back the array to the jQuery
     echo json_encode($data);
     }
     catch(PDOException $e) {
       echo $e->getMessage();
      }
     }
    }
    ?>

我也有同样的问题。对于我来说，解决方案是将z-index设置为更高的值，就像这样

.ui-autocomplete
{
    position:absolute;
    cursor:default;
    z-index:1001 !important
}

有些元素隐藏了自动完成表单。

（在我的应用程序中）

试试这个，它对我有用

.ui-front {
    z-index: 1500 !important;
}

只是想和大家分享解决我问题的方法

这很常见，但可能会帮助其他人

除了在项目中包含

jqueryui.js

之外始终确保还包括

jqueryui.css

<link href="Stylesheets/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-ui.js"></script>

刚刚尝试了这一更改，但没有任何效果。在查看Firebug时，我仍然以[{“value”：“jdoe”}]的形式返回一个响应，但结果不会显示在html页面中。请尝试删除此字段：“name”。您的输入Id是newName？这似乎是CSS样式的问题。如果我删除所有CSS样式表，我会在文本框旁边看到以下消息：1结果可用，使用上下箭头键刚发现结果显示在下拉列表中，但它隐藏在表单后面。我必须移动表格才能看到它。如果我只能发现jquery ui.css中的where？使用firebug检查表单这为我修复了它，但我的z索引要高得多，因为我是在一个模式“弹出窗口”中执行此操作的。因此，请确保测试您的z索引：

console.log（“z索引：+$（.selector”）.zIndex（））在某些情况下，其z索引也为：9999999999；；-）我喜欢您的实现/*数组的第一个位置需要称为“标签”，否则它将不会在HTML字段中显示完成自动完成的任何内容。*/是救世主。。谢谢