auto complete using php, mysql and query
i found this fantastic code at www.nodstrum.com but i am not able to use it properly. it gives out a small error which i am not able to fix.
the code is at http://www.nodstrum.com/2007/09/19/autocompleter/comment-page-26/#comment-305141
can someone please help mw with this. the query is running fine as shown in the picture, but i am only able to see bullets and not the text in front. since there are 5-6 files of this code, i don't want to post the entire thing so i have mentioned the link above.
the results should be shown like the image below.
following is the code of the html file but i am still getting the same results
<!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">
</div>
</div>
</form>
</div>
below is the php code
<?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 ac开发者_JAVA技巧cess to this script!';
}
}
?>
Did you figure it out? I liked the autofill script. Downloaded, installed and then ran into the same problem. I fixed it tho. You have to open rpc.php and around line 34 find:
echo '<li onClick="fill(\''.$result->value.'\');">'.$result->valu.'</li>';
and change "value" to your database column you are querying.
For example, mine is: echo '<li onClick="fill(\''.$result->client_name.'\');">'.$result->client_name.'</li>';
Works great! Hope it helps you!
Looking at the code in the link, if you are using the same CSS try adding !important to the color property. I suspect the CSS of the page you're running this on is overwriting the plugin's 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;
}
Rather than using !important, this might also be solved by linking to the plugin's CSS after the main css file for your site:
<link rel='stylesheet' href='/path/to/site.css' />
<link rel='stylesheet' href='/path/to/plugin.css' />
加载中,请稍侯......
精彩评论