<!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="js/jquery.min.js"></script>
<script type="text/javascript">
function txtFocus(el) {
if (el.defaultValue == el.value) { el.value = ‘‘; el.style.color = ‘#000‘; }
}
function txtBlur(el) {
if (el.value == ‘‘) { el.value = el.defaultValue; el.style.color = ‘#666‘; }
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$("[name=w]").click(function() {
$("#txtStr").val($(this).text());
$("#ss").click();
});
});
</script>
<style type="text/css">
body { font-family: "微软雅黑"; font-size: 14px; }
.conter { background-color: #fff; margin: 30px 100px 30px 100px; border: 1px solid #999; }
.wenti { letter-spacing: 5px; font-size: 16px; font-weight: bold; padding: 8px; cursor: pointer; }
.wenti:hover { background-color: #F5FFFA; color: #000; }
.huida div { display: none; background-color: #FFF8DC; letter-spacing: 2px; line-height: 20px; margin-left: 10px; margin-right: 10px; padding: 8px; font-size: 12px; }
input.text, textarea.textarea { background: #fff; color: #333; border: 1px solid #eee; border-top-color: #999; border-left-color: #999; padding: 1px; vertical-align: middle; height: 22px; line-height: 22px; }
input.button { background: #FFA54F repeat-x; padding-top: 3px; border: 1px solid #708090; width: 80px; height: 25px; font-size: 10pt; cursor: hand; }
</style>
</head>
<body style="background-color:#f6f6f6;">
<form id="form1" runat="server">
?<div class="conter" >
???<div class="q" >
?????<div style="margin:20px">
???????<input id="txtStr" type="text" class="text" value="输入问题的关键字" onFocus="txtFocus(this)" onBlur="txtBlur(this)" ?/>
???????<input id="ss" type="button" class="button" value="搜索"/>
?????</div>
?????<div style=" margin:10px 0px 10px 20px"> 快捷标签：<a name="w" style="font-size: 12px;color:#f01; text-decoration:none; cursor:pointer" >1111</a> <a name="w" style="font-size: 12px;color:#f01; text-decoration:none; cursor:pointer" >三三</a> <a name="w" style="font-size: 12px;color:#f01; text-decoration:none; cursor:pointer" >444444</a> <a name="w" style="font-size: 12px;color:#f01; text-decoration:none; cursor:pointer" >自定义</a> </div>
????
???</div>
?</div>
</form>
</body>
</html>
jQuery点击文字输入搜索框 搜索
原文地址：http://www.cnblogs.com/wu2017/p/7484767.html