0

我正在尝试基于查询数据库并返回一个数组然后在下拉列表中对其进行格式化并使用ajax实时将其输出给用户来实时搜索用户或您有什么。到目前为止，下面是我的代码。问题是每次我运行搜索suggestions应该是页面在div. 问题 此外，不会出现搜索结果。

这是代码：

PHP（与 js 位于同一页面）：

<?php
/* User Search */
if (isset($_POST['userSearch'])):
    $string = $_POST['userSearch'];
    if (strlen($string) > 3):
        $sql = "SELECT id, user_name, user_email, full_name FROM users WHERE MATCH (user_name) AGAINST ({$string}* IN BOOLEAN MODE) ORDER BY user_name LIMIT 10";
        $display = '';
        if ($result = Nemesis::query($sql)):
            $result->fetch_assoc();
            $display .= '<ul id="searchresults">';
            foreach ($result as $row):
                $link = 'index.php?do=users&amp;action=edit&amp;userid=' . (int) $row['id'];
                $display .= '<li><a href="' . $link . '">' . $row['user_name'] . '<small>' . $row['full_name'] . ' - ' . $row['user_email'] . '</small></a></li>';
            endforeach;
            $display .= '</ul>';
            print $display;
            exit();
        endif;
    endif;
endif;
?>

JS：

$("#search-input").watermark("Search Username");
$("#search-input").keyup(function () {
    var srch_string = $(this).val();
    var data_string = 'userSearch=' + srch_string;
    if (srch_string.length > 3) {
        $.ajax({
            type: "post",
            url: "",
            data: data_string,
            beforeSend: function () {
                $('#search-input').addClass('loading');
            },
            success: function (res) {
                $('#suggestions').html(res).show();
                $("input").blur(function () {
                    $('#suggestions').customFadeOut();
                });
                if ($('#search-input').hasClass("loading")) {
                    $("#search-input").removeClass("loading");
                }
            }
        });
    }
    return false;
});

CSS：

<style>
/* == Live Search == */
#suggestions{position:absolute;z-index:800;left:20px}
#searchresults{position:relative;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#F3F3F3;width:250px;margin-top:7px;left:0;z-index:800;border:1px solid #ccc;background-image:url(../images/td-bg.png);background-repeat:repeat-x;background-position:left top;padding:5px}
#searchresults a small{display:block;line-height:1.2em;color:#999;font-size:12px}
#searchresults a{display:block;text-decoration:none;padding:3px}
#searchresults a:hover{text-decoration:none;background-color:#FFF;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px}
</style>

HTML：

<div id="searchDiv">
<input name="search-input" type="text" class="input" id="search-input" size="40" style="width:240px" onclick="disAutoComplete(this);">
<div id="suggestions"></div>
</div>
4

0 回答 0