Jquery autocomplete 注意的一点破事

原创 2015年11月18日 22:48:30

前面使用Jquery autocomplete对输入框进行自动填充代码编写,如果远程url获取的数据为单纯的string返回的json数据,那么就可以正常显示,如果是返回的复杂的json数据就无法正常相应,非常的郁闷,在此记录一下解决该问题的方法,希望对遇到此类问题的童鞋们能够有所帮助。

1、引入jquery的相关js和css代码

@Scripts.Render("~/Scripts/jquery-1.10.2.min.js")    
@Styles.Render("~/Content/jquery-ui.css")    
@Scripts.Render("~/Scripts/jquery-ui.js")

2、基本的调用autocomplete的代码

客户端js代码

 <script>
            
            $("#Grade").autocomplete({
                source: "/Products/GradeAutoComplete",
                minLength: 1,
                dataType: "json",
            });

</script>

服务器代码

public ActionResult GradeAutoComplete(string term)
{
      List<string> tmp = db.Products.Select(x => x.Grade).Distinct().Where(x => x.Contains(term)).ToList<string>();
      return Json(tmp, JsonRequestBehavior.AllowGet);
}


返回的JSON数据

["abcdefgh","Brazos","Laredo","San Jacinto","Scavino"]

3、返回复杂JSON数据格式时的其他调用模式

客户端代码

           <script>
            $("#SKU1").autocomplete({

                source: function (request, response) {

                    var url = '/products/SkuAutoComplete?term=' + request.term;
                    $.ajax({
                        'url': url,
                        dataType: 'json',
                        success: function (dataObj) {
                            response(dataObj);
                        }
                    });
                },
                select: function (event, ui) {

                    $(this).value = ui.item.label;
                    $("#SKU").val(ui.item.value);

                    if (ui.item.ItemType == "Product")
                    {
                        $("#DVOthers").hide();
                        $("#DVProduct").show();

                    }
                    else
                    {
                        $("#DVOthers").show();
                        $("#DVProduct").hide();
                    }
                    event.preventDefault();
                }

            });
            
            </script>


服务器代码

public ActionResult SkuAutoComplete(string term)
        {
            List<SkuSingle> tmp = new List<SkuSingle>();
            //List<string> tmp = new List<string>();
            foreach(var it in db.Skus.Where(x => x.name.Contains(term)))
            {
                Product_Item_Type_Lookup pitl = db.Product_Item_Type_Lookup.Find(it.ItemType);
                tmp.Add(new SkuSingle { value = it.ID, label = it.name, barcode = it.barcode, ItemType = pitl.type });
                //tmp.Add(it.name);
            }
            
             return Json(tmp, JsonRequestBehavior.AllowGet);


        }


返回的JSON数据

[{"value":5,"label":"RGPA316Y","barcode":"811617024055","ItemType":"Product"},{"value":10,"label":"RRPA316","barcode":"812788019316","ItemType":"Product"}]

此时可以具备自动填充的内容,这里面最关键的是返回的JSON数据必须包含label和value的项,否则不能正常显示出自动填充的下拉框,而此处我也是浪费了一段时间,当然是因为我没有去看自动填充的注意事项的原因,也没有看到具体介绍。

4、注意事项

注意返回复杂JSON数据对象的时候,一定要具备label属性,否则不能够正常显示出自动填充的下啦框






jQuery自动补全autocomplete插件使用,三种获取数据源方式具体实现(true)

jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一。jQuery ui autocomplete主要支持字符串Array、JSON两种数据格式。 主要参数: Sour...

使用jQuery Autocomplete(自动完成)插件,结合ajax实现搜索框匹配

要实现如图所示效果,通过ajax,和Autocomplete完成匹配,整了好久,做一下记录。 实现过程如下 jsp页面:引入   添加标签用于绑定:  药店名称: auto...

JqueryUI学习笔记-自动完成autocomplete

Insert title here .ui-autocomplete-category { font-weight: bold; padding: .2em .4em; margin: .8...

jQuery UI Autocomplete 事件API

重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用。例如: $("#title").autocomplete( "方法名...
  • yfgcq
  • yfgcq
  • 2015年05月13日 14:58
  • 2943

jquery Autocomplete 实现自动补全(四)解决jquery 高版本不支持browser方法

解决jquery 高版本不支持browser方法,实现 jquery autocomplete 自动补全方法

单击触发jquery.autocomplete的两种方法

jquery.autocomplete的参数 minChars设置为0时,默认要双击才会触发jquery.autocomplete,如果想要单击触发的话,得进行一定的处理才行.下面讲下我知道的单击触发...
  • smeyou
  • smeyou
  • 2012年08月31日 11:16
  • 7319

[已解决]AutoCompleteTextView 不显示匹配的内容,因为将空的内容添加进去了

09-20 17:11:08.586 28516-996/com.wbm.app.activity W/Filter: An exception occured during performFilte...
  • Rodulf
  • Rodulf
  • 2016年09月20日 18:01
  • 1061

jQuery autocomplete提示框被遮住问题

参考链接 问题引出: 昨天有个需求,弹出层的某个输入框需要用自动补全功能提示,觉得没什么,因为之前有做过输入框自动补全的功能,用的就是jquery.autocomplete插件,觉得还不错,且有高...

jQuery Autocomplete 自动补全功能

使用Autocomplete可以很简单的就有文本框的自动补全功能提示了。 在HTML文件中引入autocomplete的js文件和css样式文件,以及autocomplete压缩包中的jQuery的j...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery autocomplete 注意的一点破事
举报原因:
原因补充:

(最多只允许输入30个字)