목차
데모 - 아래 검색 버튼을 클릭하여 데이터를 검색하세요
웹 프론트엔드 JS 튜토리얼 jquery는 ajax 키워드 데이터 검색 구현을 생성합니다 idea_jquery

jquery는 ajax 키워드 데이터 검색 구현을 생성합니다 idea_jquery

May 16, 2016 pm 05:41 PM
데이터 검색

웹 개발 과정에서 데이터를 검색하기 위해 첫 페이지에 키워드를 입력해야 하는 경우가 종종 있습니다. 우리가 일반적으로 사용하는 검색 방법은 검색 결과를 다른 페이지에 표시하는 것입니다. 고성능 웹사이트를 구축하는 것은 가장 적절한 방법이 아닙니다. 오늘은 간단하고 매력적인 Ajax 검색을 만들기 위해 jQuery, MySQL 및 Ajax를 사용하는 방법을 여러분과 공유하고 싶습니다. jQuery를 활용해 실용적인 데이터 전송 모달 팝업 폼 만들기 》JQuery 프로젝트의 실제 적용에 대한 두 번째 튜토리얼

기본적으로 모든 결과를 표시하려면 검색을 클릭하세요

A를 입력하면 나타나는 검색결과

p를 입력하면 검색결과가 표시됩니다

해당 검색어 페이지가 없습니다

데모 - 아래 검색 버튼을 클릭하여 데이터를 검색하세요

파일 구조는 주로 여러 파일을 사용합니다. index.php 홈페이지 dbcon.php 데이터베이스 연결 파일 search.php 검색 처리 페이지

Files

첫 번째 단계는 ajax_search 데이터베이스를 생성한 다음 ajax_search 테이블을 생성하는 것입니다

코드 복사 코드는 다음과 같습니다.

CREATE TABLE `ajax_search` (
`id` int(11) NOT NULL auto_increment,
`FirstName` varchar(50) NOT NULL,
`LastName` varchar(50) NOT NULL,
`Age` int(11) NOT NULL,
`Hometown` varchar(50) NOT NULL,
`Job` varchar(50) NOT NULL ,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

HTML: index.php--프로그램 메인 페이지
코드 복사 코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org /1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>Ajax 튜토리얼: jquery 사용 mysql</title>로 ajax 검색 만들기
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7 .0/jquery.min .js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css.css" />
</head> ;
<script 언어="javascript">
$(document).ready(function(){
//로딩 바 표시
function showLoader()
$(' .search-Background').fadeIn(200);
}
//로딩 바 숨기기
function hideLoader(){
$('#sub_cont').fadeIn (1500);
$('.search-Background').fadeOut(200)
}
$('#search').keyup(function(e) {
if( e.keyCode == 13 ) {
showLoader();
$('#sub_cont').fadeIn(1500)
$("#content #sub_cont").load("search.php ?val=" $( "#search").val(), hideLoader());
}
});
$(".searchBtn").click(function(){
//진행률 표시
showLoader()

$('#sub_cont').fadeIn(1500)
$("#content #sub_cont").load("search.php ?val=" $( "#search").val(), hideLoader());
});
});
</script>
<body>
<h1>Ajax 튜토리얼: jquery 및 mysql을 사용하여 Ajax 검색 만들기</h1>
<div class="textBox">
<input type="text" value="" maxlength= "100" name= "searchBox" id="search">

</div> <brclear= "all" />
<div id="content">
<div class="search-Background">
<label><img src ="loader.gif " alt="" /></label>
</div>
<div id="sub_cont">

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

DeepSeek PDF를 변환하는 방법 DeepSeek PDF를 변환하는 방법 Feb 19, 2025 pm 05:24 PM

DeepSeek PDF를 변환하는 방법

React Query에서 데이터를 필터링하고 검색하는 방법은 무엇입니까? React Query에서 데이터를 필터링하고 검색하는 방법은 무엇입니까? Sep 27, 2023 pm 05:05 PM

React Query에서 데이터를 필터링하고 검색하는 방법은 무엇입니까?

PHP를 사용하여 양식에서 데이터 검색 및 필터링을 처리하는 방법 PHP를 사용하여 양식에서 데이터 검색 및 필터링을 처리하는 방법 Aug 12, 2023 pm 04:00 PM

PHP를 사용하여 양식에서 데이터 검색 및 필터링을 처리하는 방법

DeepSeek에서 데이터를 검색하는 방법 DeepSeek에서 데이터를 검색하는 방법 Feb 19, 2025 pm 03:42 PM

DeepSeek에서 데이터를 검색하는 방법

MySQL과 CoffeeScript를 이용한 개발: 데이터 검색 기능 구현 방법 MySQL과 CoffeeScript를 이용한 개발: 데이터 검색 기능 구현 방법 Jul 29, 2023 pm 09:27 PM

MySQL과 CoffeeScript를 이용한 개발: 데이터 검색 기능 구현 방법

Laravel을 사용하여 데이터 검색 및 추천 기능을 구현하는 방법 Laravel을 사용하여 데이터 검색 및 추천 기능을 구현하는 방법 Nov 02, 2023 am 10:12 AM

Laravel을 사용하여 데이터 검색 및 추천 기능을 구현하는 방법

DeepSeek 란 무엇입니까? DeepSeek 란 무엇입니까? Mar 12, 2025 pm 01:54 PM

DeepSeek 란 무엇입니까?

PHP 개발 기술: 데이터 검색 및 필터링 기능 구현 방법 PHP 개발 기술: 데이터 검색 및 필터링 기능 구현 방법 Sep 20, 2023 pm 02:52 PM

PHP 개발 기술: 데이터 검색 및 필터링 기능 구현 방법

See all articles