自動完成不顯示返回的結果

儘管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);

當檢查在螢火蟲的結果，我得到諸如響應：

[{ 「值」：「jdoe」}]

但是，我從來沒有看到在html頁面中顯示的建議列表。有什麼問題是什麼建議。

感謝， AB

來源

2013-02-25 anthony

我加入到我的主css文件的z-index樣式的自動完成解決了這一問題。現在一切正常。

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

來源

2013-02-25 17:02:30 anthony

這固定了我的，但我的Z指數要高得多，因爲我是在一個模態「彈出」。所以，確保你測試了你的z-index：'console.log（「z-index：」+ $（「。selector」）.zIndex（））;' – 2014-11-09 15:36:13

@anthony爲了捕獲這個#bug， D – kupendra 2015-04-04 12:40:44

沒有解決我的問題 – Rexford 2015-07-24 18:46:30

你有沒有嘗試呢？

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

你的數組鍵是'value'，不'term'

來源

2013-02-25 15:05:30

只是去嘗試改變，但它並沒有區別。在查看Firebug時，我仍然以[{「value」：「jdoe」}]的形式迴應，但結果不顯示在html頁面中。 – anthony 2013-02-25 15:22:45

嘗試刪除此字段：「名稱」。你的輸入ID是newName？ – 2013-02-25 15:54:05

它似乎是一個CSS樣式問題。如果我刪除所有CSS樣式表，我會在文本框旁邊看到以下消息： 1結果可用，使用向上和向下箭頭鍵 – anthony 2013-02-25 16:29:08

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

來源

2013-10-13 01:47:55 Aida

我喜歡你的實現 – 2017-04-22 07:52:56

我有同樣的問題。對於我的解決辦法是z索引設置爲更高的值這樣

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

一些元件隱藏自動填充形式。（在我的應用程序）

來源

2015-11-25 14:09:37 Ramzes

它的工作就像一個魅力:) – 2015-12-30 07:21:02

試試這個，它爲我工作

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

來源

2017-07-21 04:23:36

自動完成不顯示返回的結果

回答

相關問題