타이핑 중에 입력 필드의 초점이 흐려짐 (AJAX 검색)

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> 

사용 유형 및 아약스 호출한다. 결과를 인쇄하기 위해 데이터베이스와 서클에 대한 쿼리 만 있기 때문에 PHP 검색 페이지를 포함하지 않았습니다.

이상한 점은이 스크립트는 Firefox와 잘 작동하지만 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

내가 원래 코드로 문제를 모방하려고 빠른 테스트를했다하지만 난 당신이 크롬에 언급 된 문제를 복제 할 수 없습니다 - 그것은 이후에 크롬과 파이어 폭스 모두에서 잘 작동 필드 값 문자열 길이 검사와 별도로 구문 오류 (여기서는 복사/붙여 넣기로 인한 것일 수도 있음)를 수정합니다. 문자열 길이에 대한 테스트는 콜백 함수가 아닌 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

예, 특히 Windows의 경우 크롬에 우선합니다. 다른 컴퓨터에서 잘 작동합니다.

부트 스트랩 모달에서 'tab-index = -1'을 제거하면 쉽게 해결할 수 있습니다. 이것은 아약스 호출에 초점을 잃는 문제를 해결할 것입니다.

하나의 단점, Esc는 더 이상 초점과 모달 닫기를 잃지 않습니다.