您现在的位置是：首页 > 前端

当前栏目

jQuery做个TextBox自动完成条

jQuery 自动完成 textbox 做个

2023-09-14 09:00:58 时间

刚开始学jQuery，于是想试试学习效果，所以就做了个这个TextBox自动完成条，练习练习。请牛人们别笑话。

代码如下：

%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %
2

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
4

html xmlns="http://www.w3.org/1999/xhtml"
5

head runat="server"
6

title 无标题页 /title
7

mce:style type="text/css" !--
8

.mouseEnter
9

{
10

background-color: Yellow;
11

}
12

-- /mce:style style type="text/css" mce_bogus="1" .mouseEnter
14

{
15

background-color: Yellow;
16

}
17

-- /mce:style style type="text/css" mce_bogus="1" .mouseEnter
19

{
20

background-color: Yellow;
21

}
22

-- /mce:style style type="text/css" mce_bogus="1" .mouseEnter
24

{
25

background-color: Yellow;
26

}
27

/style
28

mce:script type="text/javascript" src="SCRIPT/jquery-1.3.2-vsdoc2.js" mce_src="SCRIPT/jquery-1.3.2-vsdoc2.js" !--
29

/mce:script
30

script type="text/javascript" !--
31

$(function(){
33

$("#result").css("position","absolute");
34

var offset =$("#TextBox1").offset();
35

$("#result").css({left: offset.left +"px",top: offset.top + $("#TextBox1").height() + "px"});
36

});
38

// -- /mce:script
39

/head
40

body
41

form id="form1" runat="server" onsubmit="alert($(#TextBox1).val());"
42

center asp:TextBox ID="TextBox1" runat="server" width="137px" /asp:TextBox /center
43

div id="result"
44

table style="width: 100%; border-style: none solid solid solid; border-width: 1px;
45

border-color: #00FF00"
46

tbody id="mytable"
47

/tbody
48

/table
49

/div
50

/form
51

mce:script type="text/javascript" !--
52

var size = 0; //每次真实取到的数据条目数（最大10）
53

var index = -1 ;//计算keydown事件：td索引；
54

function setTdEvent(){//为生成的TD设置事件
56

//点击效果
57

$("#mytable tr td").click(function(){
58

$("#TextBox1").val($(this).text());
59

});
60

//选择高亮效果
61

$("#mytable tr td").hover(function(){
62

$(this).addClass("mouseEnter");
63

},function(){
64

$(this).removeClass("mouseEnter");
65

});
66

}
67

function setTD(text){
70

//$("tr:even").css("backgroundColor","blue");
71

return " tr td " + text + " /td /tr ";
72

}
73

function setTable(msg)
75

{
76

var tbody = $("#mytable");
77

var texts = msg.split(";");
78

var str ="";
79

size = texts.length;
80

for(var i=0;i texts.length;i++)
81

{
82

str += setTD(texts[i]);
83

}
84

tbody.html(str);
85

setTdEvent()
86

$("#div1").show("fast");
87

}
88

function setKeyDown(str)
90

{
91

$("#mytable tr td:eq(" + index + ")").removeClass("mouseEnter");
92

if(str == "+")
93

{
94

index = (++index) % size;
96

}
97

else if("-")
98

{
99

index =(--index + size) % size;
100

}
101

try{
102

$("#mytable tr td:eq(" + index + ")").addClass("mouseEnter");
103

}catch(e){
104

alert(e);
105

}
106

107

}
108

109

$(function(){
110

111

$("#TextBox1").bind("propertychange",function(){
112

$("#div1").hide("fast").html("");
113

index = -1;
114

$.ajax({
115

type: "POST",
116

url: "Suggest.ashx",
117

data: "word="+$("#TextBox1").val()+" time="+new Date().toLocaleTimeString(),
118

success: function(msg){
119

setTable( msg );
120

}
121

});
122

});
123

124

$("#TextBox1").bind("keydown",function(event){
125

if( event.keyCode == 38 )
126

{
127

128

setKeyDown("-");
129

}
130

else if(event.keyCode == 40)
131

{
132

setKeyDown("+");
133

}
134

else if(event.keyCode == 13 index != -1)
135

{
136

137

$("#TextBox1").val( $("#mytable tr td:eq(" + index + ")").text());
138

}
139

});
140

141

});
142

// -- /mce:script
143

/body
144

/html
145

%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %
146

147

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
148

html xmlns="http://www.w3.org/1999/xhtml"
149

head runat="server"
150

title 无标题页 /title
151

mce:style type="text/css" !--
152

.mouseEnter
153

{
154

background-color: Yellow;
155

}
156

157

-- /mce:style style type="text/css" mce_bogus="1" .mouseEnter
158

{
159

background-color: Yellow;
160

}
161

162

-- /mce:style style type="text/css" mce_bogus="1" .mouseEnter
163

{
164

background-color: Yellow;
165

}
166

167

-- /mce:style style type="text/css" mce_bogus="1" .mouseEnter
168

{
169

background-color: Yellow;
170

}
171

/style
172

mce:script type="text/javascript" src="SCRIPT/jquery-1.3.2-vsdoc2.js" mce_src="SCRIPT/jquery-1.3.2-vsdoc2.js" !--
173

/mce:script
174

script type="text/javascript" !--
175

176

$(function(){
177

$("#result").css("position","absolute");
178

var offset =$("#TextBox1").offset();
179

$("#result").css({left: offset.left +"px",top: offset.top + $("#TextBox1").height() + "px"});
180

181

});
182

// -- /mce:script
183

/head
184

body
185

form id="form1" runat="server" onsubmit="alert($(#TextBox1).val());"
186

center asp:TextBox ID="TextBox1" runat="server" width="137px" /asp:TextBox /center
187

div id="result"
188

table style="width: 100%; border-style: none solid solid solid; border-width: 1px;
189

border-color: #00FF00"
190

tbody id="mytable"
191

/tbody
192

/table
193

/div
194

/form
195

mce:script type="text/javascript" !--
196

var size = 0; //每次真实取到的数据条目数（最大10）
197

var index = -1 ;//计算keydown事件：td索引；
198

199

function setTdEvent(){//为生成的TD设置事件
200

//点击效果
201

$("#mytable tr td").click(function(){
202

$("#TextBox1").val($(this).text());
203

});
204

//选择高亮效果
205

$("#mytable tr td").hover(function(){
206

$(this).addClass("mouseEnter");
207

},function(){
208

$(this).removeClass("mouseEnter");
209

});
210

}
211

212

213

function setTD(text){
214

//$("tr:even").css("backgroundColor","blue");
215

return " tr td " + text + " /td /tr ";
216

}
217

218

function setTable(msg)
219

{
220

var tbody = $("#mytable");
221

var texts = msg.split(";");
222

var str ="";
223

size = texts.length;
224

for(var i=0;i texts.length;i++)
225

{
226

str += setTD(texts[i]);
227

}
228

tbody.html(str);
229

setTdEvent()
230

$("#div1").show("fast");
231

}
232

233

function setKeyDown(str)
234

{
235

$("#mytable tr td:eq(" + index + ")").removeClass("mouseEnter");
236

if(str == "+")
237

{
238

239

index = (++index) % size;
240

}
241

else if("-")
242

{
243

index =(--index + size) % size;
244

}
245

try{
246

$("#mytable tr td:eq(" + index + ")").addClass("mouseEnter");
247

}catch(e){
248

alert(e);
249

}
250

251

}
252

253

$(function(){
254

255

$("#TextBox1").bind("propertychange",function(){
256

$("#div1").hide("fast").html("");
257

index = -1;
258

$.ajax({
259

type: "POST",
260

url: "Suggest.ashx",
261

data: "word="+$("#TextBox1").val()+" time="+new Date().toLocaleTimeString(),
262

success: function(msg){
263

setTable( msg );
264

}
265

});
266

});
267

268

$("#TextBox1").bind("keydown",function(event){
269

if( event.keyCode == 38 )
270

{
271

272

setKeyDown("-");
273

}
274

else if(event.keyCode == 40)
275

{
276

setKeyDown("+");
277

}
278

else if(event.keyCode == 13 index != -1)
279

{
280

281

$("#TextBox1").val( $("#mytable tr td:eq(" + index + ")").text());
282

}
283

});
284

285

});
286

// -- /mce:script
287

/body
288

/html
289

290

291

292

Ajax调用的一般处理程序为：
293

294

view plaincopy to clipboardprint?
295

%@ WebHandler Language="C#" %
296

297

using System;
298

using System.Web;
299

using System.Linq;
300

using System.Xml;
301

using System.Xml.Linq;
302

303

public class Suggest : IHttpHandler
304

{
305

306

public void ProcessRequest(HttpContext context)
307

{
308

HttpResponse Response = context.Response;
309

Response.Charset = "gb2312";
310

Response.ContentEncoding = System.Text.Encoding.UTF8;
311

Response.ContentType = "text/plain";
312

Response.StatusCode = 200;
313

string start = context.Request.Params["word"].ToString();
314

Response.Write(GetSuggest(start));
315

Response.Flush();
316

}
317

318

public bool IsReusable
319

{
320

get
321

{
322

return false;
323

}
324

}
325

326

/// summary
327

/// 获取响应字符串
328

/// /summary
329

/// param name="start" 查询起始字符串 /param
330

/// returns 响应字符串 /returns
331

private string GetSuggest(string start)
332

{
333

XElement root = XElement.Load(AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "Suggest.xml");
334

System.Collections.Generic.IEnumerable string
335

q = (from r in root.Elements()
336

where (r.Name).ToString().ToLower().StartsWith(start.ToLower())
337

select r.Name.ToString()).Take(5);
338

System.Text.StringBuilder sb = new System.Text.StringBuilder();
339

foreach (string w in q)
340

{
341

sb.Append(w + ";");
342

}
343

if (sb.Length != 0)
344

sb.Remove(sb.Length - 1, 1);
345

return sb.ToString();
346

}
347

348

349

}
350

%@ WebHandler Language="C#" %
351

352

using System;
353

using System.Web;
354

using System.Linq;
355

using System.Xml;
356

using System.Xml.Linq;
357

358

public class Suggest : IHttpHandler
359

{
360

361

public void ProcessRequest(HttpContext context)
362

{
363

HttpResponse Response = context.Response;
364

Response.Charset = "gb2312";
365

Response.ContentEncoding = System.Text.Encoding.UTF8;
366

Response.ContentType = "text/plain";
367

Response.StatusCode = 200;
368

string start = context.Request.Params["word"].ToString();
369

Response.Write(GetSuggest(start));
370

Response.Flush();
371

}
372

373

public bool IsReusable
374

{
375

get
376

{
377

return false;
378

}
379

}
380

381

/// summary
382

/// 获取响应字符串
383

/// /summary
384

/// param name="start" 查询起始字符串 /param
385

/// returns 响应字符串 /returns
386

private string GetSuggest(string start)
387

{
388

XElement root = XElement.Load(AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "Suggest.xml");
389

System.Collections.Generic.IEnumerable string
390

q = (from r in root.Elements()
391

where (r.Name).ToString().ToLower().StartsWith(start.ToLower())
392

select r.Name.ToString()).Take(5);
393

System.Text.StringBuilder sb = new System.Text.StringBuilder();
394

foreach (string w in q)
395

{
396

sb.Append(w + ";");
397

}
398

if (sb.Length != 0)
399

sb.Remove(sb.Length - 1, 1);
400

return sb.ToString();
401

}
402

403

404

}
405

其中xml文档其实也不是什么标准的xml文档，就是拿来存储数据，练习练习刚学的Linq to XML。由于不想建表，本人也许有点懒惰吧，xml文档内容都是随机产生的：所以下面的效果显示的结果都是随机生成的；不说了。来个图例：

jQuery自动完成点击html元素 1 /************************************************************************** 2 * jQuery自动完成点击html元素 3 * 声明： 4 * 本来是想让嵌入产品完成自动检测，但是这种方法在Qt4.8的WebView控件中 5 * 不能够正确的执行，目前不知道为什么。
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件原文:从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery (四) 使用...
jquery ui autocomplete输入中文不自动完成的问题因为输入法或浏览器的问题，在输入中文后并没有触发自动完成，要再按多一下键盘才触发，查看发现它是用keydown来实现.bind( keydown.autocomplete , function(event) {.
优秀的 jQuery 文本输入框自动完成 & 自动提示插件文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作，是非常好的产品使用体验。这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件，帮助你在网站中轻松添加输入框的自动完成和自动提示功能。
Jquery主要控件的取值、赋值，包括textbox,button,lable,radio,chec textbox:var str = $( #txt ).val(); $( #txt ).val( Set Lbl Value //文本框，文本区域： $( #text_id ).

猜你喜欢

Cmd命令怎样进入MySQL数据库（cmd 怎进入mysql）
elementui滚动条美化_vue element ui文档
SqlServer控制库存，提高物流仓储效率（sqlserver扣库存）
备份使用Redis技术保障项目网址数据的安全备份（使用redis项目网址）
Python开发系列课程(16) – 进程和线程详解编程语言
时间Java操作Redis实现设置有效期（redisjava过期）
Oracle计算接近圆周率的精确值（oracle的圆周率）
mysql基础详解数据库
探索Linux网络IO的精彩世界（linux网络io）
MapReduce运行原理详解大数据
地址探寻Linux下宽带地址的奥秘（linux查看宽带）
PHP基于imap获取邮件实例
OleDbCommand与OleDbCommandBuilder、OleDbDataAdapter、OleDbDataReader的关系

相关主题

jquery（1）
jQuery的ajax
jQuery笔记(4)
2.jQuery对象
jQuery的Deferred
jquery类操作

zl程序教程

当前栏目

jQuery做个TextBox自动完成条

相关文章