jquery – 如何在MVC4 RazorView中实现Dropdownlist列表图像选择以及文本框

这看起来像是一个启用了自动完成功能的文本框.您可以使用任何自动完成插件(如jQuery UI库自动完成)来实现此功能.jQuery ui允许您自定义自动完成选项项的HTML标记以包含图像.

第一步是将jQuery,jQuery UI库加载到您的页面.

接下来,在我们看来,我们需要一个文本框,我们需要这个功能.

<input id="countrySearch" value="" />

下一步是在控制器中编写一个动作方法,以JSON格式返回所需的数据.

public ActionResult Countries(string term)
{
   var list=new List<CountryVM>();
   // Hardcoding 2 items for demo.
   //to do : read data from your db and build the list.

   list.Add(new CountryVM { ID=1,Name="US",FlagImg="http://yoursite/usa.jpg"});
   list.Add(new CountryVM { ID=2,Name="IN",FlagImg="http://yoursite/in.jpg"});

   return Json(list,JsonRequestBehavior.AllowGet);
}

假设您有一个名为CountryVM的视图模型

public class CountryVM
{
  public int ID { set;get;}
  public string Name { set;get;}
  public string FlagImg { set;get;}
}

所以这个动作方法将返回这样的JSON数据.

[
    {
        "ID": "1","Name": "US","FlagImg": "http://yoursite/usa.jpg"
    },{
        "ID": "1","FlagImg": "http://yoursite/in.jpg"
    }
]

让我们回到客户端,在视图中我们有文本框,现在我们需要在该文本框上启用自动完成插件.默认情况下,插件将在自动建议下拉列表中呈现listitem(< li>).我们需要告诉插件来构建我们的自定义标记(包括标志图像).我们可以使用create方法进行我们想要的定制.所以有这个javascript代码来做到这一点.

<script type="text/javascript">
 $(function(){

    $("#countrySearch").autocomplete({       
        source: function (request,response) {                  
            $.ajax({
                url: "@Url.Action("Countries","Home")",success: function (data) {
                    response($.map(data,function (item) {                   
                        return { label: item.Name,value: item.ID,image: item.FlagImg };
                    }))
                }
            })
        },create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul,item) {
                return $('<li>')
                    .append("<a><div><img src='" +item.image+ "' />"
                                                 +item.label+"</div></a>")
                    .appendTo(ul);
            };
        },select: function (event,ui) {   
            //you can access ui.item to get the selected item object.        
            console.log("Selected item id : " + ui.item.value);
            return false;
        }
    });

 });
</script>

而已.这应该为您提供自动完成功能,其中包含图像.