百度搜索框输入新闻智能提醒的贯彻形式,java

2019-07-26 作者:网站首页   |   浏览(130)

当获焦时,文本消失,失焦时文本出现

JS实现仿google、百度搜索框输入信息智能提示的实现方法

   这篇文章主要介绍了JS实现仿google、百度搜索框输入信息智能提示的实现方法,实例分析了javascript实现智能提示功能的技巧,非常具有实用价值,需要的朋友可以参考下

  本文实例讲述了JS实现仿google、百度搜索框输入信息智能提示的实现方法。分享给大家供大家参考。具体如下:

  ?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

<!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>

<title>仿google、百度搜索框输入信息智能提示的实现</title>

<style type="text/css" media="screen">

body

{

font: 11px arial;

}

.suggest_link

{

width:120px;

background-color: #FFFFFF;

padding: 2px 6px 2px 6px;

}

.suggest_link_over

{

width:120px;

background-color: #E8F2FE;

padding: 2px 6px 2px 6px;

}

#suggestResult

{

position: absolute;

background-color: #FFFFFF;

text-align: left;

border: 1px solid #000000;

}

/*input*/

.input_on

{

padding: 2px 8px 0pt 3px;

height: 18px;

border: 1px solid #999;

background-color: #FFFFCC;

}

.input_off

{

padding: 2px 8px 0pt 3px;

height: 18px;

border: 1px solid #CCC;

background-color: #FFF;

}

.input_move

{

padding: 2px 8px 0pt 3px;

height: 18px;

border: 1px solid #999;

background-color: #FFFFCC;

}

.input_out

{

/*height:16px;默认高度*/

padding: 2px 8px 0pt 3px;

height: 18px;

border: 1px solid #CCC;

background-color: #FFF;

}

</style>

<script language="javascript" type="text/javascript">

var $ = document.getElementById;

//创建XMLHttpRequest对象

function createXMLHttpRequest() {

var obj;

if (window.XMLHttpRequest) { //Mozilla 浏览器

obj = new XMLHttpRequest();

}

else if (window.ActiveXObject) { // IE浏览器

try {

obj = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

obj = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) { }

}

}

return obj;

}

//当输入框的内容变化时,调用该函数

function searchSuggest() {

var inputField = $("txtSearch");

var suggestText = $("suggestResult");

if (inputField.value.length > 0) {

var o = createXMLHttpRequest();

var url = "SearchResult.ashx?searchText=" escape(inputField.value);

o.open("GET", url, true);

o.onreadystatechange = function () {

if (o.readyState == 4) {

if (o.status == 200) {

var sourceItems = o.responseText.split("n");

if (sourceItems.length > 1) {

suggestText.style.display = "";

suggestText.innerHTML = "";

for (var i = 0; i < sourceItems.length - 1; i ) {

var sourceText = sourceItems[i].split("@")[1];

var sourceValue = sourceItems[i].split("@")[0];

var s = "<div onmouseover="javascript:suggestOver(this);" ";

s = " onmouseout="javascript:suggestOut(this);" ";

s = " onclick="javascript:setSearch('" sourceText "','" sourceValue "');" ";

s = " class="suggest_link" >" sourceText "</div>";

suggestText.innerHTML = s;

}

}

else {

suggestText.style.display = "none";

}

}

}

}; //指定响应函数

o.send(null); // 发送请求

}

else {

suggestText.style.display = "none";

}

}

function delayExecute() {

$("valueResult").value = "";

window.setTimeout(function () { searchSuggest() }, 800);

//延时处理

}

function suggestOver(div_value) {

div_value.className = "suggest_link_over";

}

function suggestOut(div_value) {

div_value.className = "suggest_link";

}

function setSearch(a, b) {

$("txtSearch").value = a;

$("valueResult").value = b;

var div = $("suggestResult");

div.innerHTML = "";

div.style.display = "none";

}

function showResult() {

alert($("txtSearch").value $("valueResult").value);

}

</script>

</head>

<body>

<form id="form1" action="">

<input type="text" id="txtSearch" name="txtSearch" onkeyup="delayExecute();" size="20"

class="input_out" onfocus="this.className='input_on';this.onmouseout=''"

onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};"

onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" />

<input type="hidden" id="valueResult" name="valueResult" value="" />

<br />

<div id="suggestResult" style="display: none">

</div>

<br/>

<input id="button1" type="button" value="提交" onclick="showResult();" />

</form>

</body>

</html>

  服务器端C#代码

  ?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

<%@ WebHandler Language="C#" Class="SearchResult" %>

using System;

using System.Web;

using System.Data;

public class SearchResult : IHttpHandler {

public void ProcessRequest (HttpContext context) {

object QueryWord=context.Request.QueryString["searchText"];

if (QueryWord != null)

{

if (QueryWord.ToString().Trim().Length > 0)

{

DataTable dt = getDB();

string returnText = "";

if (dt != null && dt.Rows.Count > 0)

{

DataRow[] dr = dt.Select(" name like '%" QueryWord .ToString() "%' ");

if (dr.Length > 0)

{

for (int i = 0; i < dr.Length; i )

{

//可设置返回多字符串

returnText = dr[i]["id"].ToString() "@" dr[i]["name"].ToString() "n";

}

}

}

context.Response.Write(returnText);

context.Response.End();

}

}

}

public bool IsReusable {

get {

return false;

}

}

/// <summary>

/// 获取数据源的方法

/// </summary>

/// <returns>数据源</returns>

private DataTable getDB()

{

DataTable dt = new DataTable();

dt.Columns.Add("id");

dt.Columns.Add("name");

dt.Columns.Add("age");

dt.Rows.Add(new object[] { "000001", "张三", "26" });

dt.Rows.Add(new object[] { "000002", "张晓", "26" });

dt.Rows.Add(new object[] { "000003", "张岚", "27" });

dt.Rows.Add(new object[] { "000004", "李四", "25" });

dt.Rows.Add(new object[] { "000005", "李星", "27" });

return dt;

}

}

  以上介绍了JS实现仿google、百度搜索框输入信息智能提示的实现方法, 希望本文所述对大家的javascript程序设计有所帮助。

这篇文章主要介绍了JS实现仿google、百度搜索框输入信息智能提示的实现方法,实例...

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<input id="text" type="text" value="点我就消失"/>
<script>
var oText=document.getElementById("text");
var onoff=true;
oText.color="#000";
oText.onfocus=function(){
if(onoff){
this.value="";
this.color="red";
onoff=false;
}
}

oText.onblur=function(){
if(this.value==''){
this.color="#000";
this.value="点我就消失";
onoff=true;
}
}
</script>
</body>
</html>

您可能感兴趣的文章:

  • JavaScript实现搜索框的自动完成功能(一)
  • js实现搜索框关键字智能匹配代码
  • javascript搜索框效果实现方法
  • JS实现仿google、百度搜索框输入信息智能提示的实现方法
  • JS CSS实现仿新浪微博搜索框的方法
  • JS实现搜索框文字可删除功能

本文由yzc216亚洲城发布于网站首页,转载请注明出处:百度搜索框输入新闻智能提醒的贯彻形式,java

关键词: yzc216亚洲城