JQuery проблемы с автозаполнением?

Question

JQuery проблемы с автозаполнением?

Я консультировался с несколькими потоками по этой проблеме и перепробовал много методов для отладки, пока не нашел 100% решения. Я пытаюсь реализовать автозаполнение на сайте.

Основная проблема заключается в том, что выпадающий список / предложения не отображаются полностью. Под полем ввода отображается что-то, что правильно реагирует, когда я набираю определенные значения, но не полностью (похоже на свернутое меню). Я что-то пропустил?

Вот мой 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;
}

Кто-нибудь замечает какие-либо проблемы или есть предложения?

1

autocomplete css jquery jquery-ui-autocomplete php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я понял это … Здесь была дополнительная скобка:

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

Очевидно, PHP-оператор «echo json_encode ($ dname_list)» создавал дополнительную скобку, которая интерпретировалась JQuery Autocomplete как нулевая, и, в свою очередь, не возвращала никаких значений. Исправление убирало эту дополнительную скобку:

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

Спасибо всем, кто посмотрел. Также, Важный Помните если вы когда-либо испытывали разочарование или проблемы с кодом, продолжайте! Не сдавайся! Вы найдете решение!

0