Front-end Code
Reference Js<script src= "~/content/artdialog/lib/jquery-1.10.2.js" ></script> <script src= "~/content /jquery-autocomplete/lib/jquery-migrate-1.2.1.js "></script> <script src=" ~/content/ Jquery-autocomplete/jquery.autocomplete.js "></script> <script src=" ~/content/ Jquery-autocomplete/demo/localdata.js "></script> <link href=" ~/content/jquery-autocomplete/ Jquery.autocomplete.css "rel=" stylesheet "/>
JS calling code
JS calls <script type= "Text/javascript" > $ (function () { $.getjson ("/home/seach", Function (msg) { $ ( ". suggest13"). AutoComplete (msg, { minchars:0, multiple:true,//multi-query formatitem:function (row, I, max) { return i + "/" + Max + ": \" "+ row. Pinyin + "\" ["+ row. CName + "]" + "\" ["+ Row.charname +"] "; }, formatmatch:function (row, I, max) { return row. Pinyin, Row. Userno; }, formatresult:function (row) { return row. (CName ; });}); </script>
HTML code
HTML code <body> <p> <label>single City (local):</label> <input type= "text" Id= "suggest13" class= "suggest13"/> </p></body>
Back-end data sources
Publicactionresult seach () {List<Pesron> list =NewList<pesron>(); Pesron P=NewPesron (); P.pinyin="Laula"; P.name="John Doe"; P.userno="280836"; P.workno="40657"; P.cname="Laula 280836"; P.charname="Lee 440,657"; Pesron P1=NewPesron (); P1. Pinyin="Lausi"; P1. Name="Lee 401"; P1. Userno="280836"; P1.workno="40657"; P1. CName="Lausi 280836"; P1.charname="Lee 401 40657"; Pesron P2=NewPesron (); P2. Pinyin="Lisls"; P2. Name="Lee 402"; P2. Userno="280836"; P2.workno="40657"; P2. CName="Lisls 280836"; P2.charname="Lee 402 40657"; List. ADD (P); List. Add (p1); List. ADD (p2); returnJson (list, jsonrequestbehavior.allowget); } Public classPesron { Public stringPinyin {Get;Set; } Public stringName {Get;Set; } Public stringUserno {Get;Set; } Public stringWorkno {Get;Set; } Public stringCName {Get;Set; } Public stringCharname {Get;Set; } }
Show effect
Jquery-autocomplete First Experience