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属性,否则不能够正常显示出自动填充的下啦框






版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JqueryUI学习笔记-自动完成autocomplete

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

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

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

jQuery Autocomplete 使用详细说明

jQuery.Autocomplete 是jquery的流行插件,能够很好的实现输入框的自动完成(autocomplete)、建议提示(input suggest)功能,支持ajax数据加载。 ...

jQuery UI中dialog 遮盖 autocomplete的问题解决

问题:autocomplete提示框被遮挡 最近在使用jQuery 插件fullCalendar做一个会议预约功能,新建预约时用到了jQuery UI的两个插件dialog和autocomplete,...

JQuery autocomplete选中某项后触发事件

为选中后触发的事件。item为选中的相。 例如,我们可以在选中后直接跳转页面: var data = [ {text:'Link A', http://'/page1'}, {text:'Link...

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

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

Jquery autocomplete的响应频率太高而导致丢包现象

个人觉得这个主要问题是我们这边这个中文输入d

jquery UI Autocomplete 自动提示

官网文档:Autocomplete 一、jqueryui提供的重要属性   1. autofocus:当智能提示框出现时,是否自动选中第一项,默认为false,即不选中。  // Getter...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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