【问题标题】:Autocomplete Not Showing Results That Are Returned自动完成不显示返回的结果
【发布时间】:2013-02-10 18:16:44
【问题描述】:

我无法显示 jquery 自动完成的结果,尽管 php 代码返回 json 结果。 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 中检查结果时,我得到如下响应:

[{"value":"jdoe"}]

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

谢谢, 乙

【问题讨论】:

    标签: jquery autocomplete jquery-ui-autocomplete


    【解决方案1】:

    使用 CSS 提出的答案实际上只是在解决问题。根据JQuery Automcomplete API docs,您应该将ui-front 类添加到您希望自动完成列表附加到的元素(这很可能是#newName 元素的父元素),否则它只会被夹在页面。

    或者,您可以将父级的 id 指定为 appendTo 参数。

    【讨论】:

      【解决方案2】:

      只是想分享解决我问题的方法。

      这很常见,但可能对其他人有所帮助。

      除了在您的项目中包含jquery-ui.js始终确保您还包括 jquery-ui.css

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

      【讨论】:

        【解决方案3】:

        试试这个,它对我有用

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

        【讨论】:

          【解决方案4】:

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

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

          某些元素隐藏了自动完成表单。 (在我的应用中)

          【讨论】:

            【解决方案5】:

            你试过了吗?

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

            您的数组键是'value',而不是'term'

            【讨论】:

            • 刚刚尝试了该更改,但没有任何区别。通过 Firebug 查看时,我仍然以 [{"value":"jdoe"}] 的形式回复,但结果未显示在 html 页面中。
            • 尝试删除此字段:“名称”。你的输入 ID 是 newName 吗?
            • 这似乎是 CSS 样式问题。如果我删除所有 CSS 样式表,我会在文本框旁边收到以下消息:1 个结果可用,使用向上和向下箭头键
            • 刚刚发现结果显示在下拉列表中,但它隐藏在表单后面。我必须移动表格才能看到它。一定是样式问题,如果我只能发现在哪里。
            • 在你的 jquery ui.css 中?使用 firebug 检查表单
            【解决方案6】:

            在 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>
            

            myjQuery.js:

                $(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文件jscallsController.php:

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

            【讨论】:

            • 我喜欢你的实现
            • /*数组的第一个位置需要称为'label',否则在完成自动完成的HTML字段中不会显示任何内容。*/已经是救星了..谢谢
            【解决方案7】:

            我通过在我的主 css 文件中添加一个用于自动完成的 z-index 样式解决了这个问题。现在一切正常。

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

            【讨论】:

            • 这为我修复了它,但我的 z-index 高得多,因为我是在模态“弹出窗口”中执行此操作的。所以,确保你测试你的 z-index:console.log("z-index: " + $(".selector").zIndex());
            • 在某些情况下它也是 z-index:9999999999; ;-)
            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2013-03-03
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多