JQuery自動完成問題？

我已經諮詢過關於這個問題的多個線程，並且已經嘗試了很多調試方法，但還沒有找到100％的解決方案。我試圖在網站上實現自動完成功能。JQuery自動完成問題？

主要問題是下拉/建議沒有完全顯示出來。在我輸入特定值時，輸入框下面顯示的內容會正確響應，但未滿（看起來像摺疊菜單）。我錯過了什麼嗎？

這裏是我的PHP：

<?php 
if (!isset($web_dbi)) { 
     $web_dbi=new MySQLi("#", "#", "#", "#"); 
     if ($web_dbi->connect_errno) die ("Failed to connect"); 
    } 

    $sql = "query"; 
    $result = mysqli_query($web_dbi, $sql) or die("Error " . mysqli_error($web_dbi)); 

    $dname_list = array(); 
    while($row = mysqli_fetch_array($result)) 
    { 
     $dname_list[] = $row['first']; 
    } 

    $num_rows_result = mysqli_num_rows($result); 

?>

這裏是我的HTML：

<!doctype html> 
<html lang="en"> 
<head> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css"> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.24/jquery.autocomplete.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.24/jquery.autocomplete.min.js"></script> 

</head> 
<body> 

<div class="ui-widget"> 
    <label for="tags">Tags: </label> 
    <input id="tags"> 
</div> 

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

<script type="text/javascript"> 
    $(function() { 
     var availableTags = [ <?php echo json_encode($dname_list); ?> ]; 
     $("#tags").autocomplete({ 
      source: availableTags 
     }); 
    }); 
    </script> 

</body> 
</html>

這裏是我的CSS：

.ui-autocomplete { position: absolute; cursor: default; } 

/* workarounds */ 
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */ 

/* 
* jQuery UI Menu 1.8.7 
* 
* Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 
* Dual licensed under the MIT or GPL Version 2 licenses. 
* http://jquery.org/license 
* 
* http://docs.jquery.com/UI/Menu#theming 
*/ 
ul.ui-autocomplete.ui-menu { 
    z-index: 1000; 
} 

.ui-menu { 
    list-style:none; 
    padding: 2px; 
    margin: 0; 
    display:block; 
    float: left; 
} 
.ui-menu .ui-menu { 
    margin-top: -3px; 
} 
.ui-menu .ui-menu-item { 
    margin:0; 
    padding: 0; 
    zoom: 1; 
    float: left; 
    clear: left; 
    width: 100%; 
} 
.ui-menu .ui-menu-item a { 
    text-decoration:none; 
    display:block; 
    padding:.2em .4em; 
    line-height:1.5; 
    zoom:1; 
} 
.ui-menu .ui-menu-item a.ui-state-hover, 
.ui-menu .ui-menu-item a.ui-state-active { 
    font-weight: normal; 
    margin: -1px; 
}

有誰發現任何問題或有任何建議？

來源

2016-02-18 draft

我想它了...有一個額外的支架位置：

var availableTags = [ <?php echo json_encode($dname_list); ?> ];

顯然，「回聲json_encode（$ dname_list）」 PHP語句產生額外的支架，這是由解釋爲空JQuery Autocomplete，並且不會返回任何值。解決方法是刪除額外的支架：

var availableTags = <?php echo json_encode($dname_list); ?>;

感謝任何人誰看了。此外，重要請記住如果您曾經遇到過挫折或代碼挑戰，繼續前進！不要放棄！你會找到一個解決方案！

來源

2016-02-18 20:43:00 draft

JQuery自動完成問題？

回答

相關問題