php - AJAX と PHP のオートコンプリート (SuggestionsList)

Question

suggestionList検索結果に表示したいのですが、4 つの質問があります

1. 安全ですか？

2. google chrome で動作せず、firefox や ie で動作しない理由

3. ユーザーが提案のいずれも選択しなかった場合、2>秒後に提案を非表示にする方法、私はやろうとしましたが、うまくいきませんでしたなし」、2000)]

4. WHERE > NAME LIKE を使用しているときに SQL クエリに引用符を追加する方法

ここにコードがあります

<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';
    }