auto complete using php, mysql and query

Question

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. error screen shot

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.

enter image description here

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">
                &nbsp;
            </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 access to this script!';
    }
}
?>

What is the error? Pretty pictures and links to comments are all very well and good, but I may as well slap myself round the face with a fish when it comes to answering your question. — Bojangles
– Bojangles, Commented Oct 6, 2011 at 13:36
I'm guessing the code on nodstrum is correct. so it would be handy to see your code, you might have configured something wrong for your server. — Mark Cameron
– Mark Cameron, Commented Oct 6, 2011 at 13:37
I'm guessing this is just a matter of incorrect CSS with black fg & bg colors. — Michael Berkowski
– Michael Berkowski, Commented Oct 6, 2011 at 13:38

Gil · Accepted Answer · 2011-11-25 19:38:35Z

1

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!

answered Nov 25, 2011 at 19:38

Gil

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Michael Berkowski · Accepted Answer · 2011-10-06 13:44:28Z

0

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' />

answered Oct 6, 2011 at 13:44

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

2 Comments

mmdel Over a year ago

@ Michael i added the !important but still seem to get the same result. i might be doing it wrongly i guess. pl. help. i have posted the code above

Michael Berkowski Over a year ago

@mmdel You'll need to inspect the box while it's open using Firebug or Chrome/Safari developer tools. Right-click on it and "Inspect element". You'll at least see then whether the text is actually in there (I'm betting it is) and what CSS rules are being applied.

Collectives™ on Stack Overflow

auto complete using php, mysql and query

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related