问题

当键入关键字时，它会显示建议。（OK）

enter image description here

当您点击建议中的关键字时，它会起作用。（OK）

但是当我们删除关键字并点击页面的任何位置然后页面内容重新加载并显示为您可以在图片中看到。 enter image description here

网站网址为http://www.4songs.pk

标题中的代码

<script src="http://www.4songs.pk/js/jquery-1.10.2.js"></script>
<script>
    $(function(){

        $(document).on( 'scroll', function(){

            if ($(window).scrollTop() > 100) {
                $('.scroll-top-wrapper').addClass('show');
            } else {
                $('.scroll-top-wrapper').removeClass('show');
            }
        });

        $('.scroll-top-wrapper').on('click', scrollToTop);
    });

    function scrollToTop() {
        verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
        element = $('body');
        offset = element.offset();
        offsetTop = offset.top;
        $('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
    }
</script>
<script type="text/javascript">
var myAjax = ajax();
function ajax() {
        var ajax = null;
        if (window.XMLHttpRequest) {
                try {
                        ajax = new XMLHttpRequest();
                }
                catch(e) {}
        }
        else if (window.ActiveXObject) {
                try {
                        ajax = new ActiveXObject("Msxm12.XMLHTTP");
                }
                catch (e){
                        try{
                                ajax = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (e) {}
                }
        }
        return ajax;
}
function request(str) {
    //Don't forget to modify the path according to your theme
        myAjax.open("POST", "/suggestions", true);
        myAjax.onreadystatechange = result;
        myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        myAjax.setRequestHeader("Content-length", str .length);
        myAjax.setRequestHeader("Connection", "close");
        myAjax.send("search="+str);
}
function result() {
        if (myAjax.readyState == 4) {
                var liste = myAjax.responseText;
                var cible = document.getElementById('tag_update').innerHTML = liste;
                document.getElementById('tag_update').style.display = "block";
        }
}
function selected(choice){
        var cible = document.getElementById('s');
        cible.value = choice;
        document.getElementById('tag_update').style.display = "none";
}
</script>

第二期

当自动建议加载时，它还包含一些空标记，如图所示我把这张照片作为Inspect Elements enter image description here

PHP代码很干净

<?php
include('config.php');
if(isset($_POST['search']))
{
    $q = $_POST['search'];
    $sql_res=mysql_query("SELECT * FROM dump_songs WHERE (song_name LIKE '%$q%') OR (CONCAT(song_name) LIKE '%$q%') LIMIT 10");
    while($row=mysql_fetch_array($sql_res))
    {?>
    <li><a href="javascript:void(0);" onclick="selected(this.innerHTML);"><?=$row['song_name'];?></li>
<?php
    }
}?>

Answer 1

在function request(str)中添加if语句，以检查str长度是否大于零。

function request(str) {
    if(str.length > 0)
    {
        // Your existing code
    }
    else
    {
        document.getElementById('tag_update').innerHTML = '';
    }
}

简而言之，您所描述的问题令人满意，因为您发送给str的数据中的/suggestions参数为空。服务器返回304错误，导致重定向到根页面。您的js脚本将返回的html放入建议容器中。这就是为什么你会看到这种奇怪的观点。

-UPDATE 1 -

在评论中的用户请求后添加以下代码

else
{
    document.getElementById('tag_update').innerHTML = '';
}

-UPDATE 2 - （2014年7月16日）
为了处理第二个问题（在用户更新他的问题之后）

您忘记关闭此代码行中的a标记

<li><a href="javascript:void(0);" onclick="selected(this.innerHTML);"><?=$row['song_name'];?></li>

PHP＆amp; MySql和Ajax自动建议问题

问题

第二期

1 个答案: