html 自动完成控件,jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)

╰+哭是因爲堅強的太久メ 2022-10-05 13:56 177阅读 0赞

下面来使用 autocomplete插件来实现类似效果。

1. 创建 AjaxPage.aspx 页面，在其中定义 WebMethod 方法来返回 搜索页面需要的输入框所有提示条目。 后台代码如下：

using System.Collections.Generic;

using System.IO;

using System.Runtime.Serialization.Json;

using System.Web.Services;

public partial class AjaxPage : System.Web.UI.Page

\{

\[WebMethod\]

public static string GetAllHints()

\{

Dictionary data = new Dictionary();

data.Add("苹果4代iphone正品", "21782");

data.Add("苹果4代 手机套", "238061");

data.Add("苹果4", "838360");

data.Add("苹果皮", "242721");

data.Add("苹果笔记本", "63348");

data.Add("苹果4s", "24030");

data.Add("戴尔笔记本", "110105");

data.Add("戴尔手机", "18870");

data.Add("戴尔键盘", "30367");

DataContractJsonSerializer serializer = new DataContractJsonSerializer(data.GetType());

using (MemoryStream ms = new MemoryStream())

\{

serializer.WriteObject(ms, data);

return System.Text.Encoding.UTF8.GetString(ms.ToArray());

\}

\}

\}

注：该方法返回的数据格式为json字符串。

2. 创建搜索页面 Index.aspx， 前台代码如下：

var v = 1;

$(document).ready(function () \{

$.ajax(\{

type: "POST",

contentType: "application/json",

url: "AjaxPage.aspx/GetAllHints",

data: "\{\}",

dataType: "json",

success: function (msg) \{

var datas = eval('(' + msg.d + ')');

$("\#txtIput").autocomplete(datas, \{

formatItem: function (row, i, max) \{

return "

<table> 
 <tbody> 
  <tr> 
   <td align="left">" + row.Key + "</td> 
   <td align="right"><font style="color:#009933;font-family:'黑体';font-style:italic;">约" + row.Value + "个宝贝</font>&nbsp;&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

";

\},

formatMatch: function(row, i, max)\{

return row.Key;

\}

\});

\}

\});

\});

实现效果如下：

发表评论取消回复

表情：

评论列表（有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery UI 实例 - 自动完成（Autocomplete）

根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。如需了解更多有关 autocomplete 部件的细节，请查看 API 文档 [自动完成部件（Auto

清疚/ 2024年03月24日 16:33/ 0 赞/ 27 阅读

相关 html 自动完成控件,jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)

下面来使用 autocomplete插件来实现类似效果。 1. 创建 AjaxPage.aspx 页面，在其中定义 WebMethod 方法来返回搜索页面需要的输入框所有提

╰+哭是因爲堅強的太久メ/ 2022年10月05日 13:56/ 0 赞/ 178 阅读

相关 jQuery autocomplete实现仿搜索引擎文本自动补全自动完成插件

原文：[jQuery autocomplete实现仿搜索引擎文本自动补全自动完成插件][jQuery autocomplete] 源代码下载地址：[http://www.zu

我就是我/ 2022年08月23日 05:45/ 0 赞/ 308 阅读

相关 jQuery UI 实例 - 自动完成（Autocomplete）

根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。如需了解更多有关 autocomplete 部件的细节，请查看 API 文档 [自动完成部件（Autoco

谁践踏了优雅/ 2022年08月19日 13:24/ 0 赞/ 190 阅读

相关 Autocomplete 自动补全JQuery

资料：http://jqueryui.com/autocomplete/ <span style="font-size:14px;"><!doctype html>

红太狼/ 2022年07月24日 03:23/ 0 赞/ 177 阅读

相关 JS autocomplete({})自动完成

Step 1:JS定义下拉元素的属性，有四个属性分别完成不同的功能 label是下拉列表元素显示的内容，value是点选后保存到输入框的值 // 定义下拉提示的变量

﹏ヽ暗。殇╰゛Y/ 2022年07月16日 10:19/ 0 赞/ 190 阅读

相关使用jQuery Autocomplete(自动完成)插件

根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。默认功能当您在输入域中输入时，自动完成（Autocomplete）部件提供相应的建议。在

古城微笑少年丶/ 2022年06月17日 04:00/ 0 赞/ 254 阅读

相关 jQuery.Autocomplete实现自动完成功能（详解）

本篇文章除了介绍jquery.autocomplete基本参数外，主要说明jquery.autocomplete的数据源的格式问题。 1、jquery.autoco

╰+哭是因爲堅強的太久メ/ 2022年06月12日 03:57/ 0 赞/ 243 阅读

相关 Vue Autocomplete 自动完成

页面： // 用闭包的方式，index表示第几个组件 <el-autocomplete v-model="state4" :fetc

港控/mmm°/ 2022年05月19日 04:00/ 0 赞/ 164 阅读

相关 jQuery.Autocomplete实现自动完成功能（详解）

1、jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomp

r囧r小猫/ 2022年04月08日 09:16/ 0 赞/ 457 阅读