- asp.NET jqueryUI autocomplete
- <asp:TextBox ID="txtSearchbox"
- style="float:left;padding:5px 1px 5px 1px;" runat="server" >
- </asp:TextBox>
- <script type="text/javascript">
- $(document).ready(function () {
- $('#txtSearchbox').autocomplete( {
- source: function (request, response) {
- //console.log(request.term);
- $.ajax
- ({
- url: "AutoComplete.asmx/GetSearchInfo",
- data: "{ 'prefixText': '" + request.term + "' }",
- dataType: "json",
- type: "POST",
- contentType: "application/json; charset=utf-8",
- dataFilter: function (data) {
- //console.log(data.toString());
- //alert(data.toString());
- return data;
- },
- success: function (data) {
- // console.log(data.d.toString());
- response($.map(data.d, function (item) {
- // console.log(item.Isin)
- // console.log(item.Name)
- return
- {
- label: item.Name.toString()
- value: item.Name.toString()
- }
- }));
- },
- error: function (XMLHttpRequest, textStatus, errorThrown) {
- alert(textStatus);
- }
- });
- },
- minLength: 2
- });
- });
- </script>
- [WebMethod]
- public List<SearchObject> GetSearchInfo(string prefixText)
- {
- var seo = new SearchObject();
- var getSeo = staticList.getSEOlist().Where(str => str.SearchString.ToLower().Contains(prefixText.ToLower()));
- return getSeo.ToList();
- }
- /*AutoComplete flyout */
- .autocomplete_completionListElement
- {
- margin:0px!important;
- background-color:#ffffff;
- color:windowtext;
- border:buttonshadow;
- border-width:1px;
- border-style:solid;
- cursor:'default';
- overflow:auto;
- height:200px;
- font-family:Tahoma;
- font-size:small;
- text-align:left;
- list-style-type:none;
- padding: 5px 5px 5px 5px;
- }
- /* AutoComplete highlighted item */
- .autocomplete_highlightedListItem
- {
- background-color:#ffff99 ;
- color:black;
- padding:0px;
- }
- /* AutoComplete item */
- .autocomplete_listItem
- {
- background-color:window;
- color:windowtext;
- padding:0px;
- }
- return
- {
- label: item.Name.toString()
- value: item.Name.toString()
- }
- return {
- label: item.Name.toString()
- value: item.Name.toString()
- }
- <asp:ScriptManager ID="ScriptManager1" runat="server">
- <Services>
- <asp:ServiceReference Path="/PathToServiceHere/AutoComplete.svc" />
- </Services>
- </asp:ScriptManager>
- <input id="ModelBox" type="text" style="width: 158px;" />
- $(function () {
- $("#ModelBox").autocomplete({
- minLength: 0,
- delay: 0,
- cache: true,
- source: function (req, addToList) {
- var popList = new GetAutoCompleteService.GetAutoComplete();
- popList.GetModels(req.term, function (model) {
- var listItems = [];
- if (model.length > 0) {
- for (var key = 0; key < model.length; key++) {
- listItems.push(model[key].Model);
- }
- } else {
- listItems.push("No Matching Model.");
- }
- addToList(listItems);
- }, function onError() {
- });
- }
- });
- $("#ModelBox").click(function () {
- // close if already visible
- if ($("#ModelBox").autocomplete("widget").is(":visible")) {
- $("#ModelBox").autocomplete("close");
- return;
- }
- // work around a bug (likely same cause as #5265)
- $(this).blur();
- // pass empty string as value to search for, displaying all results
- $("#ModelBox").autocomplete("search", "");
- $("#ModelBox").focus();
- });
- });
- namespace autocomplete.Service
- {
- using System.Collections.Generic;
- using System.Linq;
- using System.ServiceModel;
- using System.ServiceModel.Activation;
- using System.Data;
- [ServiceContract(Namespace = "GetAutoCompleteService")]
- [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
- public class GetAutoComplete
- {
- [OperationContract]
- public List<Models> GetModels(string model)
- {
- // Data access here to retrieve data for autocomplete box then convert to list
- // or however you get the data into list format
- List<Models> List = dataJustPulled.ToList();
- return List;
- }
- }
- }
- return{
- label: item.Name.toString(),
- value: item.Name.toString()
- }