PHP와 JS는 검색 프롬프트 기능 코드 공유를 실현합니다.
- 小云云원래의
- 2018-03-14 09:22:131601검색
이 글에서는 주로 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 : 'json',
data: {'q':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와 JS는 검색 프롬프트 기능 코드 공유를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：PHP에서 SQL 주입을 방지하는 방법의 예다음 기사：PHP에서 SQL 주입을 방지하는 방법의 예