入力中に入力フィールドのフォーカスが失われています（AJAX Search）

Question

私は自分で解決できない問題があります。私は入力中に結果を示唆するajaxで検索入力を行いました。スクリプトはFirefoxで正常に動作しますが、クロムで使用すると入力中に入力フィールドのフォーカスが失われます。

//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の両方で正常に働いていましたフィールド値の文字列の長さのチェックとは別に構文エラー（おそらくここではコピー/ペーストが原因です）を修正します。文字列の長さのテストは、コールバック関数ではなく、コメントに書かれているようにajax呼び出しを行う前に行う必要があります。

問題：それは厄介な小さなエラーを投げた。このように複数行のIDで

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

。

私はすぐに以下のように書き直しました。そのいくつかは興味深いかもしれません。

<!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呼び出しに焦点を当てることの問題を解決します。

1つの欠点は、Escがもうフォーカスとモーダルを失うことはありません。