PHP & MySql 和 Ajax 自动建议问题

Question

我正在使用 Bootstrap 作为网站。我使用 Ajax、CSS 和 PHP 来显示 mp3 搜索的自动建议。一切工作正常，但出现了问题。我尝试了不同的方式，但问题仍然存在。

问题

当输入关键字时，它会显示建议。 (确定)

当您点击建议中的关键字时，它就会起作用。 (确定)

但是当我们删除关键字并单击页面上的任意位置时，页面内容会重新加载并显示为您在图片中看到的。

网站网址为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>

第二期

当自动建议加载时，它还包含一些空标签，如图所示 我把这张照片当作检查元素

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

在函数request(str)中放置一个if语句来检查str长度是否大于零。

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

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

-更新1-

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

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

-更新 2- (16/07/2014)
为了处理第二个问题(用户更新问题后)

You 忘记关闭这行代码中的 a 标记

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