jquery学习笔记-文本框的占位字符与ajax自动补全提示框

最新推荐文章于 2022-03-23 22:45:27 发布

mysuc

最新推荐文章于 2022-03-23 22:45:27 发布

阅读量644

点赞数

文章标签： jquery html js ajax json

本文链接：https://blog.csdn.net/mysuc/article/details/37597337

版权

html代码：

<!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>自动完成下拉框</title>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script src="biaodan2.js" type="text/javascript"></script>
<style>
h3{
	background:#999;
}
.placeholder{
	font-style:italic;
	text-decoration:overline;
	letter-spacing:3px;
	color:#999;
}
.autocomplete{
	background:none repeat scroll 0 0 #FFFFFF;
	border:1px solid #817FB2;
	display:none;
	position:absolute;
	width:114px;
	top:14px; 
}
.selected{
	background-color:#FC3;
}
</style>
</head>
<body>
<form id="search">
  <label for="search-text">search the site</label>
  <input type="text" name="search-text" id="search-text"/>
</form>
</body>
</html>

js代码：

$(document).ready(function(){
	var searchLabel = $('#search label').remove().text();
	$('#search-text').addClass('placeholder').val(searchLabel).focus(function(){
		if (this.value == searchLabel){
			$(this).removeClass('placeholder').val('');
		}
	}).blur(function(){
		if (this.value == ''){
			$(this).addClass('placeholder').val(searchLabel);
		}
	});
	$('#search').submit(function(){
		if ($('#search-text').val() == searchLabel){
			$('#search-text').val('');
		}
	});
	
	var $autocomplete = $('<ul class="autocomplete"></ul>').hide().
	  insertAfter('#search-text');
	  
	$('#search-text').attr('autocomplete','off').keyup(function(event){
		if (event.keyCode > 40 || event.keyCode == 8){
			$.ajax({
			  'url':'autocomplete.php',
			  'data':{'search-text':$('#search-text').val()},
			  'dataType':'json',
			  'type':'POST',
			  'success':function(data){
				 if (data.length){
					$autocomplete.empty();
					$.each(data,function(index,term){
						$('<li></li>').text(term).appendTo($autocomplete)
						  .mouseover(function(){
							setSelectedItem(index);  
						  })
						  .click(function(){
							populateSearchField();  
						  });
					}); 
					//$autocomplete.show();
					setSelectedItem(0);
				 }else{
					setSelectedItem(null); 
				 }
			  },
			  'error':function(){
				 alert(arguments[1]); 
			  }
			});
		}else if (event.keyCode == 38 && selectedItem !== null){
			setSelectedItem(selectedItem - 1);
			event.preventDefault();
		}else if (event.keyCode == 40 && selectedItem !== null){
			setSelectedItem(selectedItem + 1);
			event.preventDefault();
		}else if (event.keyCode == 27 && selectedItem !== null){
			setSelectedItem(null);
		}
	});
	
	$('#search-text').blur(function(event){
		setTimeout(function(){
			setSelectedItem(null);
		},250);
	});
	
	$('#search-text').keypress(function(event){
		if (event.keyCode == 13 && selectedItem !== null){
			populateSearchField();
			event.preventDefault();
		}
	});

	var selectedItem = null;
	var setSelectedItem = function(item){
		selectedItem = item;
		if (selectedItem === null){
			$autocomplete.hide();
			return;
		}
		if (selectedItem < 0){
			selectedItem = 0;
		}
		if (selectedItem >= $autocomplete.find('li').length){
			selectedItem = $autocomplete.find('li').length-1;
		}
		$autocomplete.find('li').removeClass('selected')
		  .eq(selectedItem).addClass('selected');
		$autocomplete.show();
	};
	
	var populateSearchField = function(){
		$('#search-text').val($autocomplete.find('li').eq(selectedItem).text());
		setSelectedItem(null);
	};
});

服务器端代码（我用的是php）：

<?php
  if (strlen($_REQUEST['search-text']) < 1){
	  print '[]';
	  exit;
  }
  $terms = array('access','action','xaml','xoops');
  $possibilities = array();
  foreach ($terms as $term){
	  if (strpos($term,strtolower($_REQUEST['search-text'])) === 0){
		  $possibilities[] = $term;
	  }
  }
  print json_encode($possibilities);
?>