input autocomplete 下拉提示+支持中文

js 代码:

$.getJSON("/Foreign/Getforeign_routeEndPoint", function (data) {
            $("#NameReturn_Arch").autocomplete(data, {
                minChars: 0, //表示在自动完成激活之前填入的最小字符
                max: 100, //表示列表里的条目数
                autoFill: true, //表示自动填充
                mustMatch: true, //表示必须匹配条目,文本框里输入的内容,必须是data参数里的数据,如果不匹配,文本框就被清空
                matchContains: false, //表示包含匹配,相当于模糊匹配
                scrollHeight: 200, //表示列表显示高度,默认高度为180
                dataType: "json", //数据格式

formatItem: function (row) {
                    return row.text;
                },
                formatMatch: function (row) {
                    return row.text;
                },
                formatResult: function (row) {
                    return row.text;
                }
            });
        });

后台:

public ActionResult Getforeign_routeEndPoint()
        {
            List<foreign_route> List = for_rou.GetRouteCodeName("EndPoint").ToList();
            List<SelectText> ulist = new List<SelectText>();
            if (List.Count > 0)
            {
                string[] endPoint;
                SelectText text;
                foreach (var i in List)
                {
                    endPoint = i.EndPoint.Split(‘、‘);
                    if (endPoint.Length > 1)
                    {
                        foreach (string t in endPoint)
                        {
                            text = new SelectText { id = t, text = t };
                            if (!ulist.Any(x=>x.id==t&&x.text==t))
                            {
                                ulist.Add(text);
                            }
                        }
                    }
                    else
                    {
                        text = new SelectText { id = i.EndPoint, text = i.EndPoint };
                        if (!!ulist.Any(x => x.id == i.EndPoint && x.text == i.EndPoint))
                        {
                            ulist.Add(text);
                        }
                    }
                }
            }

return Json(ulist, JsonRequestBehavior.AllowGet);
        }

由于有的浏览器不兼容,所以需要修改一下jquery.autocomplete.js代码

在js脚本里面的199行或者200行添加修改

.bind("input", function() {  
            onChange(0, true);  
        }).bind("unautocomplete", function() {
        select.unbind();
        $input.unbind();
        $(input.form).unbind(".autocomplete");
    });

时间: 2024-10-24 12:03:17

input autocomplete 下拉提示+支持中文的相关文章

基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(docum

jQuery 实现带下拉提示且自动填充的邮箱

<!-- 本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js --> 本文用 jQuery 实现一个用户输入字符时出现能够提示邮箱后缀名的下拉菜单,并且在选择下拉菜单中的邮箱后缀名后可自动填充未完成的输入框,在做这个功能时候,我参考的是网易注册(http://reg.163.com/reg/reg.jsp?product=urs)中的邮箱栏目所实现的功能与效果.这个功能的目的是使用户在填写邮箱栏目的过程中,在带有邮箱后缀名的菜单的提示下,可以不需要完整输入自己的注册邮箱

百度搜索下拉提示框实现

最近在做百度IFE前端技术学院的题,然后有一题就是模拟百度搜索智能提示.题目是开源的,稍后给出地址. 因为博主没学过后端啊,欲哭无泪,所以不能实现后端模糊搜索,那如果前端ajax纯粹请求一份同样的数据,效果就不好. 机智的博主直接把百度搜索api借来一下. 直接从开发者工具,监控网络,找到请求地址. 百度api: 我把api缩减了一下,删除了大部分暂时用不上的参数. https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abc&json=

史上最全的搜索下拉提示用户交互研究——读《An Eye-tracking Study of User Interactions with Query Auto Completion》

        搜索下拉提示(Query Auto Completion,简称QAC)现在几乎是每个搜索引擎必备的基本功能,作用是在用户在搜索框输入查询词的过程中,给用户展示一系列搜索查询query供用户选择,可以方便用户输入.缩短用户搜索时间.提高用户搜索体验.在这方面的研究已经有很多,如基于上下文.基于时间序列等预测query的热度.个性化排序等,但关于用户如何与搜索下拉提示(下文简称QAC)交互的研究目前还是一个空白. 微软的Katja Hofmann前几天(11.3-11.7)刚刚填补了

[WinForm]为ComboBox绑定数据源并提供下拉提示

关键代码: /// <summary> /// 为ComboBox绑定数据源并提供下拉提示 /// </summary> /// <typeparam name="T">泛型</typeparam> /// <param name="combox">ComboBox</param> /// <param name="list">数据源</param>

input输入框下拉显示tree树

这次做项目还用到了另一个tree树的插件,就是input输入框下拉tree树 我这只是简单的下拉显示tree树,没有tree树的添加.编辑.删除.移动等操作 先看图片 zTree官方API文档 http://www.treejs.cn/v3/api.php 上代码 引入的js <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> <link href=

input text 去掉标签下拉提示

autocomplete 属性 autocomplete 属性规定输入字段是否应该启用自动完成功能. 自动完成允许浏览器预测对字段的输入.当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项. 注释:autocomplete 属性适用于 <form>,以及下面的 <input> 类型:text, search, url, telephone, email, password, datepickers, range 以及 color. 例: <inpu

Select2使用实例——很好用的下拉提示选择框!

这几天一直的寻找能把select和sugget结合起来使用的例子,然后就看到了这个,发现真的很不错,它支持下拉的直接选择,也支持在下拉内容中输入过滤. 整体效果就是下面这样的: 官方网站:https://select2.github.io/ 1.首先需要引入如下文件 <link href="select2.min.css" rel="stylesheet" /> <script type="text/javascript" sr

在Mac下安装使用支持中文的LaTeX(二)

在上一篇文章中,我们提到了如何在Mac OS X(笔者所使用的是10.10,Hackintosh)下面安装并使用支持中文的MacTeX.事实上,MacTeX在安装好之后就已经默认支持多国语言,比如日语等(由于pTeX的存在,排版日文可能要更方便一些). 实际上,LaTeX是基于TeX的排版系统.TeX在刚刚诞生时,尽管它可以排版出非常漂亮的文章,但是其代码也十分复杂,使得很多人难以掌握.因此,LaTeX诞生了.它以TeX为基础,通过宏包的方式大大简化了代码.在这篇文章中,我们仅简单地说明上一篇文