自动完成使用PHP，MySQL和查询

Question

i found this fantastic code at www.nodstrum.com but i am not able to use it properly. 我在www.nodstrum.com上发现了这个很棒的代码，但我无法正确使用它。 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 该代码位于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. 由于此代码有5-6个文件，因此我不想发布整个内容，因此我已经提到了上面的链接。

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 以下是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">
                &nbsp;
            </div>
        </div>
    </form>
</div>

below is the php code 下面是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!';
    }
}
?>

Answer 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: 您必须打开rpc.php并在第34行周围找到：

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>'; 例如，我的是： echo '<li onClick="fill(\\''.$result->client_name.'\\');">'.$result->client_name.'</li>'; Works great! 很棒！ Hope it helps you! 希望对您有帮助！

Answer 2

Looking at the code in the link, if you are using the same CSS try adding !important to the color property. 查看链接中的代码，如果您使用的是相同的CSS，请尝试将!important添加到color属性。 I suspect the CSS of the page you're running this on is overwriting the plugin's CSS. 我怀疑您正在运行此页面的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;
}

Rather than using !important , this might also be solved by linking to the plugin's CSS after the main css file for your site: 除了使用!important ，还可以通过在您网站的主css文件之后链接到插件的CSS来解决此问题：

<link rel='stylesheet' href='/path/to/site.css' />
<link rel='stylesheet' href='/path/to/plugin.css' />

自动完成使用PHP，MySQL和查询

问题描述

2 个解决方案

解决方案1
1 2011-11-25 19:38:35

解决方案2
0 2011-10-06 13:44:28

自动完成使用PHP，MySQL和查询

问题描述

2 个解决方案

解决方案1 1 2011-11-25 19:38:35

解决方案2 0 2011-10-06 13:44:28

解决方案1
1 2011-11-25 19:38:35

解决方案2
0 2011-10-06 13:44:28