jQuery+PHP+Mysql은 입력 자동 완성 프롬프트 기능을 실현합니다.

이 기사에서는 백엔드 PHP와 결합된 jquery ui의 자동 완성 플러그인을 사용하며, 데이터 소스는 PHP를 통해 mysql 데이터 테이블의 데이터를 읽습니다.

사용자가 원하는 정보를 더 빠르고 정확하게 찾을 수 있도록 많은 프로젝트에서 검색 기능을 사용하고 있습니다. 이 기사에서는 Google 및 Baidu 검색 엔진과 마찬가지로 사용자 입력에 대한 자동 프롬프트 기능을 구현하는 방법을 소개합니다. 사용자가 키워드를 입력하면 입력 상자 아래에 해당 키워드와 관련된 정보를 표시하는 프롬프트가 표시됩니다. 사용자가 선택할 수 있어 사용자 경험이 향상됩니다.

이 기사에서는 백엔드 PHP와 결합된 jquery ui의 자동 완성 플러그인을 사용하며, 데이터 소스는 PHP를 통해 mysql 데이터 테이블의 데이터를 읽습니다.

XHTML

먼저 jquery 라이브러리와 관련 UI 플러그인, CSS를 가져옵니다.

<code>  <span><link</span> <span>rel</span>=<span>"stylesheet"</span> <span>href</span>=<span>"jquery.ui.autocomplete.css"</span><span>/></span>  <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"js/jquery.js"</span><span>></span><span></script></span>  <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.core.js"</span><span>></span><span></script></span>  <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.widget.js"</span><span>></span><span></script></span>  <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.position.js"</span><span>></span><span></script></span>  <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.autocomplete.js"</span><span>></span><span></script></span>  </code>

jQuery ui 플러그인은 공식 웹사이트(www.jqueryui.com)에서 다운로드할 수 있습니다.

그런 다음 본문에 입력 상자를 작성합니다.

<code>  <span><input</span> <span>type</span>=<span>"text"</span> <span>id</span>=<span>"key"</span> <span>name</span>=<span>"key"</span> <span>/></span>  </code>

jQuery

<code> 
$(<span>function</span>()<span>{</span> 
    $(<span>"#key"</span>).autocomplete(<span>{</span> 
        source: <span>"search.php"</span>, 
        minLength: <span>2</span> 
    <span>}</span>);  <span>}</span>);  </code>

자동완성 플러그인을 호출하면 데이터소스가 search.php에서 오는 것을 한눈에 알 수 있다. 사용자가 문자를 1개 입력하면 해당 데이터소스가 호출된다. 자동 완성 플러그인은 구성 가능한 여러 매개변수를 제공합니다.

disabled: 페이지가 로드된 후 비활성화되는지 여부입니다. 기본값은 true로 설정할 필요가 없습니다.

appendTo: 입력 중에 드롭다운 프롬프트 상자에 요소를 추가합니다. 기본값은 "body"입니다.

autoFocus: 기본값은 false입니다. true로 설정하면 첫 번째 드롭다운 프롬프트 상자가 선택됩니다.

지연: 데이터 로드 시 지연 시간. 기본값은 300(밀리초)입니다.

minLength: 문자 수를 입력하면 드롭다운 프롬프트가 나타납니다. 기본값은 1입니다.

위치: 드롭다운 프롬프트 상자의 위치를 ​​정의합니다.

source: 데이터 소스를 정의합니다. 데이터 소스는 json 형식이어야 합니다. 이 예에서는 search.php를 요청하여 데이터 소스를 얻습니다.

autocomplete은 또한 다양한 이벤트와 메소드를 제공합니다. 자세한 내용은 공식 웹사이트(http://jqueryui.com/demos/autocomplete)를 확인하세요.

PHP

자동 완성 플러그인을 호출한 후에는 아직 프롬프트 효과가 없습니다. 데이터 소스를 호출해야 하기 때문입니다.

먼저 테이블이 필요하고 테이블에 적절한 양의 데이터를 추가합니다. 테이블의 구조는 다음과 같습니다.

<code> 
CREATE TABLE `art` ( 
  `id` int(<span>11</span>) NOT <span>NULL</span> auto_increment, 
  `title` varchar(<span>100</span>) NOT <span>NULL</span>, 
  PRIMARY KEY  (`id`) 
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 ;  </code>

직접 테이블을 생성하고 테이블 아트에 데이터를 추가해 보세요.

search.php는 Mysql 데이터베이스에 대한 연결을 구현하고 프런트 엔드 사용자의 입력을 기반으로 데이터 테이블에서 일치하는 내용을 쿼리하고 얻은 후 JSON 형식으로 출력합니다.

<code>  <span>include_once</span>(<span>"connect.php"</span>); <span>//连接数据库</span> 
  <span>$</span><span>q</span> = strtolower(<span>$_GET</span>[<span>"term"</span>]); <span>//获取用户输入的内容</span>  <span>$</span><span>query</span>=mysql_query(<span>"select * from art where title like '$q%' limit 0,10"</span>);  <span>//查询数据库，并将结果集组成数组</span>  <span>while</span> (<span>$</span><span>row</span>=mysql_fetch_array(<span>$</span><span>query</span>)) { 
    <span>$</span><span>result</span>[] = <span>array</span>( 
        <span>'id'</span> => <span>$</span><span>row</span>[<span>'id'</span>], 
        <span>'label'</span> => <span>$</span><span>row</span>[<span>'title'</span>] 
    ); 
}  <span>echo</span> json_encode(<span>$</span><span>result</span>);  <span>//输出JSON数据</span>  </code>

최종 출력 JSON 데이터 형식은 다음과 같습니다.

<code> 
[<span>{</span><span>"id"</span>:<span>"3"</span>,<span>"title"</span>:"\u4f7f\u7528CSS\u548cjQuery\u5236\u4f5c\u6f02\u4eae\u7684\u4e0b 
\u62c9\u9009\u9879\u83dc\u5355"<span>}</span>,  <span>{</span><span>"id"</span>:<span>"4"</span>,<span>"title"</span>:"\u4f7f\u7528jQuery\u548cCSS\u63a7\u5236\u9875\u9762\u6253\u5370 
\u533a\u57df"<span>}</span>]  </code>

이때 입력을 다시 테스트해 보면 원하는 효과가 나타납니까?

마지막으로, 자동 완성 플러그인에는 입력 후 프롬프트가 표시되지 않는다는 점을 언급할 가치가 있습니다. 인터넷의 많은 학생들이 해결책을 제시했지만 최신 자동 완성 플러그인 코드가 재구성되었습니다. 내 해결책은 133행에 다음 코드를 추가하는 것입니다.

<code> 
.bind(<span>"input.autocomplete"</span>,<span>function</span>()<span>{</span> 
    <span>//修复FF不支持中文bug</span> 
    self.search(self.item);  <span>}</span>);  </code>

위 내용은 관련 내용을 포함하여 입력 자동 완성 프롬프트를 구현하는 jQuery+PHP+Mysql의 기능을 소개하는 내용으로 PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되기를 바랍니다.