#php #jquery #mysql #ajax
#php #jquery #mysql #ajax
Вопрос:
я нашел этот фантастический код на www.nodstrum.com но я не могу использовать его должным образом. выдает небольшую ошибку, которую я не могу исправить. 
код находится на http://www.nodstrum.com/2007/09/19/autocompleter/comment-page-26/#comment-305141
может кто-нибудь, пожалуйста, помочь mw с этим. запрос выполняется нормально, как показано на рисунке, но я вижу только маркеры, а не текст впереди. поскольку существует 5-6 файлов этого кода, я не хочу публиковать все целиком, поэтому я упомянул ссылку выше.
результаты должны быть показаны, как показано на рисунке ниже.
ниже приведен код html-файла, но я все еще получаю те же результаты
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Auto Suggest</title>
<script type="text/javascript" src="http://www.mywebsite.com/jquery-1.2.1.pack.js">
</script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("gettheitems.php", {queryString: "" inputString ""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<style type="text/css">
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff !important;
list-style-type: none !important;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
<div>
<form>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="http://www.mywebsite.com/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
amp;nbsp;
</div>
</div>
</form>
</div>
ниже приведен код php
<?php
$db = new mysqli('localhost', '****' ,'****', '****');
if(!$db) {
echo 'Could not connect to the database.';
} else {
if(isset($_POST['queryString'])) {
$queryString = $db->real_escape_string($_POST['queryString']);
if(strlen($queryString) >0) {
$query = $db->query("SELECT ItemDescription FROM StockMain_T WHERE ItemDescription LIKE '%$queryString%' LIMIT 10");
if($query) {
echo '<ul>';
while ($result = $query ->fetch_object()) {
echo '<li onClick="fill(''.addslashes($result->country).'');">'.$result->country.'</li>';
}
echo '</ul>';
} else {
echo 'OOPS we had a problem :(';
}
} else {
// do nothing
}
} else {
echo 'There should be no direct access to this script!';
}
}
?>
Комментарии:
1. Можете ли вы показать код, который у вас есть?
2. В чем ошибка? Красивые картинки и ссылки на комментарии — это все очень хорошо, но с таким же успехом я могу дать себе пощечину рыбой, когда дело дойдет до ответа на ваш вопрос.
3. Я предполагаю, что код на nodstrum верен. поэтому было бы удобно просмотреть ваш код, возможно, вы неправильно настроили что-то для своего сервера.
4. Я предполагаю, что это всего лишь вопрос неправильного CSS с черными цветами fg и bg.
Ответ №1:
Вы поняли это? Мне понравился скрипт автозаполнения. Скачал, установил, а затем столкнулся с той же проблемой. Я исправил это. Вы должны открыть rpc.php и вокруг строки 34 найдите:
echo '<li onClick="fill(''.$result->value.'');">'.$result->valu.'</li>';
и измените «значение» на столбец вашей базы данных, который вы запрашиваете.
Например, мой: echo '<li onClick="fill(''.$result->client_name.'');">'.$result->client_name.'</li>';
Отлично работает! Надеюсь, это поможет вам!
Ответ №2:
Глядя на код в ссылке, если вы используете тот же CSS, попробуйте добавить !important в color свойство. Я подозреваю, что CSS страницы, на которой вы запускаете это, перезаписывает CSS плагина.
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
/* Add !important */
color: #fff !important;
/* Might also need to add */
list-style-type: none !important;
}
Вместо использования !important , это также может быть решено путем ссылки на CSS плагина после основного css-файла для вашего сайта:
<link rel='stylesheet' href='/path/to/site.css' />
<link rel='stylesheet' href='/path/to/plugin.css' />
Комментарии:
1. @ Michael я добавил !важно, но, похоже, все равно получаю тот же результат. возможно, я делаю это неправильно, я думаю. pl. help. я опубликовал приведенный выше код
2. @mmdel Вам нужно будет проверить окно, пока оно открыто, с помощью Firebug или инструментов разработчика Chrome / Safari. Щелкните правой кнопкой мыши по нему и «Проверить элемент». Тогда вы, по крайней мере, увидите, действительно ли там текст (я уверен, что это так) и какие правила CSS применяются.