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自动完成问题？

回答

相关问题