PHP와 JS는 검색 프롬프트 기능 코드 공유를 실현합니다.

小云云
풀어 주다: 2023-03-21 10:46:02
원래의
1619명이 탐색했습니다.

이 글에서는 주로 PHP+JS에서 구현한 실시간 검색 프롬프트 기능을 소개합니다. 여기에는 PHP와 Ajax의 실시간 데이터 전송 및 문자열 탐색 및 매칭 관련 작업 기술이 포함되어 있습니다. 그것이 당신을 도울 수 있기를 바랍니다.

렌더링은 다음과 같습니다.

코드는 다음과 같습니다.

HTML 코드: (이 코드는 두 가지 방법으로 구현됩니다. 하나는 Jquery이고 다른 하나는 기본 JS입니다.)


<html>
<head>
  <script src="/DelphiRequest/search/js/jquery.js"></script>
  <script>
/*用原生js实现
//    function showResult(str)
//    {
//      if (str.length==0)
//      {
//        document.getElementById("livesearch").innerHTML="";
//        document.getElementById("livesearch").style.border="0px";
//        return;
//      }
//      if (window.XMLHttpRequest)
//      {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
//        xmlhttp=new XMLHttpRequest();
//      }
//      else
//      {// IE6, IE5 浏览器执行
//        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
//      }
//      xmlhttp.onreadystatechange=function()
//      {
//        if (xmlhttp.readyState==4 && xmlhttp.status==200)
//        {
//          document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
//          document.getElementById("livesearch").style.border="1px solid #A5ACB2";
//        }
//      }
//      xmlhttp.open("GET","livesearch.php?q="+str,true);
//      xmlhttp.send();
//    }
*/
//用jquery实现
     function showResult(str){
       $.ajax({
         type: "GET",
         url : "livesearch.php",
         datatype : &#39;json&#39;,
         data: {&#39;q&#39;:str} ,
         success :function (data) {
           document.getElementById("livesearch").innerHTML=data;
           document.getElementById("livesearch").style.border="1px solid #A5ACB2";
         }
       })
     }
  </script>
</head>
<body>
<form>
  <input type="text" size="30" onkeyup="showResult(this.value)">
  <p id="livesearch"></p>
</form>
</body>
</html>
로그인 후 복사

The PHP 코드는 다음과 같습니다. (PHP는 배열을 직접 사용하는 것을 고려할 수도 있고 데이터베이스 내용을 얻기 위해 데이터베이스에 직접 쿼리하는 것을 고려할 수도 있습니다. 이 코드는 배열을 사용합니다. 팁: search-suggest


php+ 검색 프롬프트 기능 예제의 jquery 구현

위 내용은 PHP와 JS는 검색 프롬프트 기능 코드 공유를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿