jquery_jquery를 기반으로 하는 Baidu 검색창 모방 효과 코드
- WBOY원래의
- 2016-05-16 18:07:591005검색
전체 렌더링을 살펴보겠습니다.
사진 1: 
사진 2: 
사진 3: 
사진 4: 
대략적인 렌더링은 이렇습니다. 다음으로 소스코드를 직접 살펴보세요
페이지:
코드를 복사하세요 코드는 다음과 같습니다.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._Default" %> 🎜> >
="text/javascript"> ;
$(document).ready(function() {
$('#autoSearchText').autoSearchText({ width: 300, itemHeight: 150,minChar:1, datafn: getData, fn: AlertMsg }) ;
});
function AlertMsg(vl){
alert('검색하려는 키워드는 ' vl); /*데이터 로드*/
function getData(val) {
var arrData = new Array()
if (val != "") {
$.ajax({
type : "post",
async : false, //동기화 제어
url: "getData.ashx",
data: "param=" val,
dataType: "json",
캐시: false,
성공: function(data) {
for (var i = 0; i < data.length; i ) {
if (val == data[i].Code.substring (0, val.length))
arrData.push(data[i].Code)
}
},
오류: function(err) {
alert(err);
}
})
}
return arrData
}
< ;/body>
CSS:
코드는 다음과 같습니다.
.autoSearchText{
border:solid 1px #CFCFCF;
height:20px>color:Gray; 🎜>} .menu_v{ 여백:0; 줄 높이:20px; 글꼴 크기:12px; none; } .menu_v li{
여백:0; line-height:20px; 스타일 유형:없음;
float: 없음
}
.menu_v lispan{
color:Red
}
#autoSearchItem{
border:solid 1px # CFCFCF;
숨김;
위치:절대;
오버플로-y:자동
JS:
코드 복사
코드는 다음과 같습니다.
1 ///
2
3 (function($) {
4 var itemIndex = 0;
5
6 $.fn.autoSearchText = function(options) {
7 //다음은 플러그인의 속성과 기본값입니다
8 var deafult = {
9 width: 200 , //텍스트 상자 너비
itemHeight: 150, //드롭다운 상자 높이
minChar: 1, //최소 문자 수(검색을 시작할 숫자부터)
datafn: null, //데이터 함수 로드
fn: null //항목 선택 후 호출되는 콜백 함수
}
var textDefault = $(this).val()
var ops = $. 확장(기본값, 옵션);
$(this).width(ops.width)
var autoSearchItem = '
float: 없음
}
.menu_v lispan{
color:Red
}
#autoSearchItem{
border:solid 1px # CFCFCF;
숨김;
위치:절대;
오버플로-y:자동
JS:
코드 복사
코드는 다음과 같습니다.
1 ///
2
3 (function($) {
4 var itemIndex = 0;
5
6 $.fn.autoSearchText = function(options) {
7 //다음은 플러그인의 속성과 기본값입니다
8 var deafult = {
9 width: 200 , //텍스트 상자 너비
itemHeight: 150, //드롭다운 상자 높이
minChar: 1, //최소 문자 수(검색을 시작할 숫자부터)
datafn: null, //데이터 함수 로드
fn: null //항목 선택 후 호출되는 콜백 함수
}
var textDefault = $(this).val()
var ops = $. 확장(기본값, 옵션);
$(this).width(ops.width)
var autoSearchItem = '
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.