输入字段在输入时失去焦点（AJAX 搜索）

Question

我有一个我自己无法解决的问题。我使用 ajax 进行了搜索输入，在输入时会提示结果。该脚本可以在 Firefox 上正常工作，但是当我在 chrome 上使用它时，输入字段在键入时会失去焦点。

代码如下：

//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
    if (window.XMLHttpRequest) {

        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {

        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {

        alert("Please update your Browser");
    }
}

//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();

//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
    if (searchReq.readyState == 4 || searchReq.readyState == 0) {
        var str = encodeURI(document.getElementById('campo-search-
        modal
        ').value);

        searchReq.open("GET", 'https://mywebsite.com/search.php?search=' + str, true);
        searchReq.onreadystatechange = handleSearchSuggest;
        searchReq.send(null);

    }
}

//Called when the AJAX response is returned.
function handleSearchSuggest() {
    if (searchReq.readyState == 4) {
        var ss = document.getElementById('cont-list-re-search')
        ss.innerHTML = '';
        if (document.getElementById('campo-search-modal').value.length > 2) {
            var str = searchReq.responseText.split("\n");
            for (i = 0; i < str.length - 1; i++) {
                //Build our element string.  This is cleaner using the DOM, but
                //IE doesn't support dynamically added attributes.
                var suggest = '<li ';
                suggest += 'class="suggest_link">' + str[i] + '</li>';
                ss.innerHTML += suggest;
            }
        }
        else {
            ss.innerHTML = 'Perfavore inserire almeno 3 caratteri!';

        }
    }
}

//Mouse over function
function suggestOver(div_value) {
    div_value.className = 'suggest_link_over';
}

//Mouse out function
function suggestOut(div_value) {
    div_value.className = 'suggest_link';
}

//Click function
function setSearch(value) {
    document.getElementById('campo-search-modal').value = value;
    document.getElementById('cont-list-re-search').innerHTML = '';
}

HTML 代码：

<form>
<div class="form-group row row-camp-search">

<div class="col-5">
<input class="form-control modal-search" type="search" id="campo-search-
modal" placeholder="Ricerca Nel Sito..." onKeyUp="searchSuggest();">

</div>
</div>
</form>   

 <div id="result-search">
<ul id="cont-list-re-search">

 </ul>

输入中的使用类型，并进行了ajax调用。我没有包含 php 搜索页面，因为只有对数据库的查询和用于打印结果的圆圈。

奇怪的是，该脚本在 Firefox 上运行良好，但在 Google Chrome 上使用时，输入字段失去焦点。即使在第一封信之后。

PHP：

$search = $_GET["search"]; 
if(!empty($search))
{



try {

$connes = new PDO("mysql:host=$DB_HOST;dbname=$DB_NAME", $DB_USER, 
$DB_PASS);
$connes->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmtb = $connes->prepare("SELECT * FROM table WHERE col like('%" . 
simple_protect($search) . "%') ORDER BY col LIMIT 2"); 

    $stmtb->execute();

    $resulta = $stmtb->fetchAll();

 }
catch(PDOException $b) {
echo "Error: " . $b->getMessage();
}
$connes = null; 
if($resulta && count($resulta) > 0)
            {
foreach($resulta as $key => $row)
                    {
echo '<a href="https://website.com/scheda/index.php?
dettagli='.strip_all($row['nome']).'"><div class="img-res-search" 
style="background-image:url(https://website.com/img/miniature/min-
'.strip_all($row['icona']).')"></div><div class="tit-res-
search">'.strip_all($row['nome']).'</div></a><div class="dett-res-search">
<div class="dett1-res-search"><i class="fa fa-star" aria-hidden="true">
</i>'.strip_all($row['voto']).'</div><div class="dett2-res-search">
<i class="fa fa-flag" aria-hidden="true"></i>Section</div></div>'."\n";
 }}
}
else
{
echo "Nessun Risultato!";
}

Answer 1

我做了一个快速测试，试图用您的原始代码模拟问题，但我无法复制您在 Chrome 中提到的问题 - 在更正语法错误后，它在 Chrome 和 Firefox 中都能正常工作（可能只是由于复制/paste here ) 除了检查字段值字符串长度。字符串长度的测试应该在您进行 ajax 调用之前（如评论中所述）而不是在回调函数中。

问题：

encodeURI(document.getElementById('campo-search-
        modal
        ').value);

像这样在多行中使用 ID 会引发令人讨厌的小错误。

然后我很快将其重写如下，其中一些可能是有趣的。

<!doctype html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>ajax search suggestions</title>
        <script>
            document.addEventListener('DOMContentLoaded',function(){
                /* ultra basic ajax function */
                function ajax( url, callback ){
                    var xhr=new XMLHttpRequest();
                    xhr.onreadystatechange=function(){
                        if( this.status==200 && this.readyState==4 )callback.call( this, this.response );
                    };
                    xhr.open( 'GET', url, true );
                    xhr.send( null );
                }

                /* onkeyup event handler */
                function searchSuggest( event ) {
                    var ss = document.getElementById('cont-list-re-search');
                    var callback=function(r){
                        ss.innerHTML = '';
                        var str = r.split("\n");
                        for( var i = 0; i < str.length - 1; i++ ) {
                            /* use DOM methods rather than string concatenation */
                            var li=document.createElement('li');
                                li.className='suggest_link';
                                li.innerHTML=str[i];
                            ss.appendChild( li );
                        }
                        /* bring focus back to form field */
                        this.focus();
                    };
                    /* Check length of input data BEFORE sending ajax request */
                    if( event.target.value.length > 2 ){
                        ajax.call( this, 'search.php?search='+event.target.value, callback.bind( event.target ) );
                    } else {
                        ss.innerHTML = 'Perfavore inserire almeno 3 caratteri!';
                    }   
                }

                /* assign event handler */
                document.getElementById('campo-search-modal').onkeyup=searchSuggest;
            }, false );
        </script>
    </head>
    <body>
        <form>
            <div class='form-group row row-camp-search'>
                <div class='col-5'>
                    <input class='form-control modal-search' type='text' id='campo-search-modal' placeholder='Ricerca Nel Sito...' /><!-- removed inline event handler -->
                </div>
            </div>
        </form>
        <div id='result-search'>
        <ul id='cont-list-re-search'></ul>
    </body>
</html>

Answer 2

是的，这在 Chrome 上很流行，尤其是在 Windows 上。在其他机器上运行良好。

您可以通过从 Bootstrap 的模态中删除 'tab-index = -1' 轻松解决它。这将解决您对 ajax 调用失去关注的问题。

一个缺点，Esc 将无法再失去焦点和模式关闭。