AJAX和PHP自动完成(SuggestionsList)

时间:2013-01-18 15:33:22

标签: php ajax

我正在尝试在搜索中显示suggestionList,我有4个问题

  1. 安全吗?

  2. 为什么它不适用于谷歌浏览器和使用Firefox和

  3. 我是如何让它隐藏2后的建议>如果是用户,则为秒 没有选择任何建议,我试图做但是它 没用 [setTimeout的(的document.getElementById( “列表”)。的style.display = “无”, 2000)]

  4. 如何在使用WHERE>时在sql查询中添加引号NAME LIKE

  5. 这是一段代码

    <script type="text/javascript">
        function showSuggestions(str)
            {
                if(str=="")
                    return;
                if(window.XMLHttpRequest())
                    {
                        xmlhttp = new XMLHttpRequest();
                    }
                else
                    {
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                xmlhttp.onreadystatechange=function()
                    {
                        if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
                            {
                                var c = document.getElementById("list");
                                c.innerHTML = xmlhttp.responseText;
                            }
                    }
                    xmlhttp.open("GET", "/ajax/character/"+str, true);
                    xmlhttp.send();
            }
    </script>
    
    <form action="/characters/" onsubmit="window.location='/characters/'+this.name.value; return false;" class="form" autocomplete="off" method="post">
    <p style="font-weight:200;color:brown;font-size:12px;">Find User.</p>
        <div>Please enter a user name &nbsp;
            <input name="name" type="text" onkeyup="showSuggestions(this.value)" maxlength="35" required="required" pattern="[A-Za-z\s]{3,35}" autofocus="autofocus"/>
            <div id="list"></div>
        </div>
        <p style="text-align:center">
            <input type="submit" class="button" value="Search"/>
        </p>
    </form>
    
    <style>
        .suggestionList {
            margin: 0px;
            padding: 0px;
            padding-left: 10px;
            line-height: 16px;
            list-style: none outside none;
    
        }
    
        .suggestionList li {
    
            margin: 0px 0px 3px 0px;
            padding: 3px;
            cursor: pointer;
        }
    
        .suggestionList li:hover {
            background-color: #659CD8;
        }
    
        .suggestionsBox {
            position: relative;
            left: 230px;
            margin: 10px 0px 0px 0px;
            width: 200px;
            background-color: #212427;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            border: 2px solid #000; 
            color: #fff;
        }
    </style>
    <?php
        if(isset($_GET['name']) && strlen($_GET['name']) > 1) {
            include('../main.php');
            $name = $_GET['name'];
            if(check_name($name)) {
            ?>
            <div class="suggestionsBox" id="suggestions" style="display :block;">
                <img src="/images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                <div class="suggestionList" id="SuggestionsList"><?
                    foreach(query('SELECT name FROM users WHERE name LIKE "'.$name.'" LIMIT 5')->fetchAll() as $q) {
                            echo '<a href="/characters/'.$q['name'].'"><li>'.$q['name'].'</li></a>';
                    } ?>
                </div>
            </div>
            <?
        }
        else
            echo 'Invalid name format';
        }
    

0 个答案:

没有答案