찾다
백엔드 개발PHP 튜토리얼jQuery+PHP+Mysql은 입력 자동 완성 프롬프트 기능을 실현합니다.

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

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



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

XHTML

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

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

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

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

<code>  <span><input> <span>type</span>=<span>"text"</span> <span>id</span>=<span>"key"</span> <span>name</span>=<span>"key"</span> <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 튜토리얼에 관심이 있는 친구들에게 도움이 되기를 바랍니다.

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
세션 고정 공격을 어떻게 방지 할 수 있습니까?세션 고정 공격을 어떻게 방지 할 수 있습니까?Apr 28, 2025 am 12:25 AM

세션 고정 공격을 방지하는 효과적인 방법은 다음과 같습니다. 1. 사용자 로그인 한 후 세션 ID 재생; 2. 보안 세션 ID 생성 알고리즘을 사용하십시오. 3. 세션 시간 초과 메커니즘을 구현하십시오. 4. HTTPS를 사용한 세션 데이터를 암호화합니다. 이러한 조치는 세션 고정 공격에 직면 할 때 응용 프로그램이 파괴 할 수 없도록 할 수 있습니다.

세션리스 인증을 어떻게 구현합니까?세션리스 인증을 어떻게 구현합니까?Apr 28, 2025 am 12:24 AM

서버 측 세션 스토리지가없는 토큰에 저장되는 토큰 기반 인증 시스템 인 JSONWEBTOKENS (JWT)를 사용하여 세션없는 인증 구현을 수행 할 수 있습니다. 1) JWT를 사용하여 토큰을 생성하고 검증하십시오. 2) HTTPS가 토큰이 가로 채지 못하도록하는 데 사용되도록, 3) 클라이언트 측의 토큰을 안전하게 저장, 4) 변조 방지를 방지하기 위해 서버 측의 토큰을 확인하기 위해 단기 접근 메커니즘 및 장기 상쾌한 토큰을 구현하십시오.

PHP 세션과 관련된 일반적인 보안 위험은 무엇입니까?PHP 세션과 관련된 일반적인 보안 위험은 무엇입니까?Apr 28, 2025 am 12:24 AM

PHP 세션의 보안 위험에는 주로 세션 납치, 세션 고정, 세션 예측 및 세션 중독이 포함됩니다. 1. HTTPS를 사용하고 쿠키를 보호하여 세션 납치를 방지 할 수 있습니다. 2. 사용자가 로그인하기 전에 세션 ID를 재생하여 세션 고정을 피할 수 있습니다. 3. 세션 예측은 세션 ID의 무작위성과 예측 불가능 성을 보장해야합니다. 4. 세션 중독 데이터를 확인하고 필터링하여 세션 중독을 방지 할 수 있습니다.

PHP 세션을 어떻게 파괴합니까?PHP 세션을 어떻게 파괴합니까?Apr 28, 2025 am 12:16 AM

PHP 세션을 파괴하려면 먼저 세션을 시작한 다음 데이터를 지우고 세션 파일을 파괴해야합니다. 1. 세션을 시작하려면 세션 _start ()를 사용하십시오. 2. Session_Unset ()을 사용하여 세션 데이터를 지우십시오. 3. 마지막으로 Session_Destroy ()를 사용하여 세션 파일을 파괴하여 데이터 보안 및 리소스 릴리스를 보장하십시오.

PHP의 기본 세션 저장 경로를 어떻게 변경할 수 있습니까?PHP의 기본 세션 저장 경로를 어떻게 변경할 수 있습니까?Apr 28, 2025 am 12:12 AM

PHP의 기본 세션 저장 경로를 변경하는 방법은 무엇입니까? 다음 단계를 통해 달성 할 수 있습니다. session_save_path를 사용하십시오 ( '/var/www/sessions'); session_start (); PHP 스크립트에서 세션 저장 경로를 설정합니다. php.ini 파일에서 세션을 설정하여 세션 저장 경로를 전 세계적으로 변경하려면 세션을 설정하십시오. memcached 또는 redis를 사용하여 ini_set ( 'session.save_handler', 'memcached')과 같은 세션 데이터를 저장합니다. ini_set (

PHP 세션에 저장된 데이터를 어떻게 수정합니까?PHP 세션에 저장된 데이터를 어떻게 수정합니까?Apr 27, 2025 am 12:23 AM

tomodifyDatainAphPessess, startSessionstession_start (), 그런 다음 $ _sessionToset, modify, orremovevariables.

PHP 세션에 배열을 저장하는 예를 제시하십시오.PHP 세션에 배열을 저장하는 예를 제시하십시오.Apr 27, 2025 am 12:20 AM

배열은 PHP 세션에 저장할 수 있습니다. 1. 세션을 시작하고 session_start ()를 사용하십시오. 2. 배열을 만들고 $ _session에 저장하십시오. 3. $ _session을 통해 배열을 검색하십시오. 4. 세션 데이터를 최적화하여 성능을 향상시킵니다.

Garbage Collection은 PHP 세션에 어떻게 효과가 있습니까?Garbage Collection은 PHP 세션에 어떻게 효과가 있습니까?Apr 27, 2025 am 12:19 AM

PHP 세션 쓰레기 수집은 만료 된 세션 데이터를 정리하기위한 확률 메커니즘을 통해 트리거됩니다. 1) 구성 파일에서 트리거 확률 및 세션 수명주기를 설정합니다. 2) CRON 작업을 사용하여 고재 응용 프로그램을 최적화 할 수 있습니다. 3) 데이터 손실을 피하기 위해 쓰레기 수집 빈도 및 성능의 균형을 맞춰야합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기