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