In my previous article
Processing image inside textbox
I have used AutoCompleteExtender of AjaxControlToolkit. In this article we will explore how to
show processing image inside text box using jQuery autocomplete.
Figure 1: Processing image inside textbox using page method

Figure 2: Search result using page method.

Figure 3: Processing image inside textbox using webservice method

Figure 4: Search result using webservice method

Let's write some code to achieve this.
Step 1: Add below cs and js file in the head section of aspx page. One can download below complete example which contains css and js file from the download code section at the end of this article.
<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" /> <link type="text/css" href="demos.css" rel="stylesheet" /> <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="js/jquery.ui.core.js" type="text/javascript"></script> <script src="js/jquery.ui.widget.js" type="text/javascript"></script> <script src="js/jquery.ui.position.js"type="text/javascript"></script> <script src="js/jquery.ui.autocomplete.js" type="text/javascript"></script>
<style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } body { font-size: 62.5%; }
</style>
Step 2: Place below html fragment inside form tag of aspx page. One can use .html file and place the below fragment in it.
<div class="demo"> <div class="ui-widget"> <p>Type "XYZ" to get "No matching record found"</p> <label>Search Keyword using page webmethod:</label> <input id="keywordpagemethod" /> <label>Search Keyword using webservice webmethod:</label> <input id="keywordservicemethod" /> </div> <div id="errMessage"> </div> </div>
Step 3: Now place below javascript in the aspx page. Below javascript snippet of autocomplete will use page method to get the search result.
<script> $(function() { $("#keywordpagemethod").autocomplete({ minLength: 2, source: function(request, response) { $.ajax({ type: "POST", url: "jQueryAutoComplete.aspx/GetCompletionList", data: "{'prefixText': '" + $('#keywordpagemethod').val() + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { response(data.d); }, failure: function(errMsg) { $('#errMessage').text(errMsg); } }); } }); }); </script>
Use below javascript snippet to get search resulut using webservice
<script> $(function() { $("#keywordservicemethod").autocomplete({ minLength: 2, source: function(request, response) { $.ajax({ type: "POST", url: "JsonWebService.asmx/GetCompletionList", data: "{'prefixText': '" + $('#keywordservicemethod').val() + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { response(data.d); }, failure: function(errMsg) { $('#errMessage').text(errMsg); } }); } });
}); </script>
Step 4: Place below method in the code behind file or in webservice.
[WebMethod] public static string[] GetCompletionList(string prefixText) { int count = 0; List<string> items; if (count == 0) { count = 10; } if (prefixText.Equals("xyz")) { items = new List<string>(1); items.Add("No matching record found"); return items.ToArray(); }
Random random = new Random(); items = new List<string>(count); for (int i = 0; i < count; i++) { char c1 = (char)random.Next(65, 90); char c2 = (char)random.Next(97, 122); char c3 = (char)random.Next(97, 122); items.Add(prefixText + c1 + c2 + c3); } return items.ToArray(); }
If you are using webervice to get search result ScriptMethod needs to be place along with WebMethod.
[WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false)]
Live Demo
This ends the article of processing image inside text box using jquery autocomplete.
|