Question

我在www.nodstrum.com找到了这个梦幻般的代码，但我无法正常使用它。它给出了一个我无法解决的小错误。 error screen shot

代码位于http://www.nodstrum.com/2007/09/19/autocompleter/comment-page-26/#comment-305141

有人可以请你帮忙。查询运行正常，如图所示，但我只能看到子弹而不是前面的文本。由于此代码有5-6个文件，我不想发布整个内容，所以我提到了上面的链接。

结果应如下图所示。

enter image description here

以下是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>

下面是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

你知道了吗？我喜欢自动填充脚本。下载，安装然后遇到同样的问题。我修好了。你必须打开rpc.php并在第34行找到：

echo '<li onClick="fill(\''.$result->value.'\');">'.$result->valu.'</li>';

并将“value”更改为您要查询的数据库列。例如，我的是：echo '<li onClick="fill(\''.$result->client_name.'\');">'.$result->client_name.'</li>'; 效果很好！希望它能帮到你！

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

使用php，mysql和查询自动完成

2 个答案: