Implementing auto complete using JQuery
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Implementing auto complete using JQuery

on

  • 1,788 views

Details step by step walk-through to Implement auto complete using JQuery

Details step by step walk-through to Implement auto complete using JQuery

Statistics

Views

Total Views
1,788
Views on SlideShare
1,781
Embed Views
7

Actions

Likes
1
Downloads
50
Comments
2

1 Embed 7

http://www.slideee.com 7

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Implementing auto complete using JQuery Document Transcript

  • 1. Implementing Auto Complete Using JQuery Implementing Auto- Complete Using JQuery bhushan.mulmule@dotnetvideotutorial.com www.dotnetvideotutorial.com Bhushan Mulmule bhushan.mulmule@dotnetvideotutorial.com www.dotnetvideotutorial.com
  • 2. Contents Introduction: ................................ Prerequisite:................................ What is jQuery?................................ What is jQuery UI?................................ Walkthrough 1: Autocomplete in its simplest form: Important Points to Note:................................ Walkthrough 2: Reading suggestion list for auto Important Points to Note:................................ Important Points to Note:................................ Walkthrough 3: Displaying More Details in Suggestion List. Important Points to Note:................................ ..................................................................................................................... ...................................................................................................................... ................................................................................................ ................................................................................................ Walkthrough 1: Autocomplete in its simplest form:........................................................... ................................................................................................ ugh 2: Reading suggestion list for auto-complete from database ........................ ................................................................................................ ................................................................................................ rough 3: Displaying More Details in Suggestion List................................. ................................................................................................ Page 2 of 19 ..................... 3 ...................... 3 ................................................. 3 ............................................. 4 ........................... 4 .................................. 7 ........................ 8 ................................ 11 ................................ 14 ............................................. 15 ................................ 19
  • 3. Introduction: This article will help you to implement auto complete functionality for textbox. understanding article consists of three walkthroughs Walkthrough 1: Most basic approach to implement auto complete fun be useful for real project but good place to start with. Walkthrough 2: This is a realistic example. Auto complete widget calls web service asynchronously to get suggestion list of employee names from database. Walkthrough 3: Extends example created in walkthrough 2 to get detail suggestion list suggestion list will be comprises of Name and City get displayed on textbox. Also on submission only EmpNo will get submitted. Examples are demonstrated using Visual Web Developer 2013 Express can use IDE of your choice, or simply Prerequisite: You should have working knowledge of: 1. HTML 2. Little Java Script 3. Basics of jQuery. Understanding of following topics will be added advantage: 1. Consuming web service using jquery.ajax() Before starting let us have look on official definitions of jQuery and jQueryUI. What is jQuery? In simple words; jQuery is javascript library. That means it is a set of javascript functions that developer can use for client side processing like validations or animations. It reduces need of writing complex java script. jQuery also take care of browser now code without burden of browser compatibility using jQuery. Official Definition: jQuery is a fast, small, and feature like HTML document traversal and manipulation, event handling, simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. to implement auto complete functionality for textbox. rticle consists of three walkthroughs with gradually increasing complexity. Most basic approach to implement auto complete functionality be useful for real project but good place to start with. ealistic example. Auto complete widget calls web service suggestion list of employee names from database. Extends example created in walkthrough 2 to get detail suggestion list comprises of Name and City; but after selecting item only name will Also on submission only EmpNo will get submitted. Examples are demonstrated using Visual Web Developer 2013 Express Edition; however you can use IDE of your choice, or simply notepad☺. You should have working knowledge of: Understanding of following topics will be added advantage: Consuming web service using jquery.ajax() Before starting let us have look on official definitions of jQuery and jQueryUI. In simple words; jQuery is javascript library. That means it is a set of javascript functions that developer can use for client side processing like validations or animations. It reduces need of writing complex java script. jQuery also take care of browser differences so developer can now code without burden of browser compatibility using jQuery. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of Page 3 of 19 to implement auto complete functionality for textbox. For better with gradually increasing complexity. ctionality. Might not ealistic example. Auto complete widget calls web service Extends example created in walkthrough 2 to get detail suggestion list. Now ut after selecting item only name will Edition; however you In simple words; jQuery is javascript library. That means it is a set of javascript functions that developer can use for client side processing like validations or animations. It reduces need differences so developer can rich JavaScript library. It makes things animation, and Ajax much use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of
  • 4. What is jQuery UI? jQuery UI is build up on built on top of the jQuery library.It and effects that developer can use on web pages to fasten the development. date time picker, tab control or auto complete.It is Ajax controls, as ASP.NET Ajax controls have numerous performance issues. Official Definition: jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. W interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. To implement autocomplete we need to include 1. jQuery.js 2. jQuery-UI.js 3. jQuery-UI.css (provides default formatting for jQueryUI widgets) Walkthrough 1: Autocomplete in its simplest form: 1. Create new empty website using visual studio. uild up on built on top of the jQuery library.It is a collection of widgets that developer can use on web pages to fasten the development. For example auto complete.It is trustworthy replacement for ASP.NET Ajax controls, as ASP.NET Ajax controls have numerous performance issues. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery To implement autocomplete we need to include following files in our project (provides default formatting for jQueryUI widgets) Autocomplete in its simplest form: Create new empty website using visual studio. Page 4 of 19 widgets, themes For example replacement for ASP.NET jQuery UI is a curated set of user interface interactions, effects, widgets, hether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery (provides default formatting for jQueryUI widgets)
  • 5. 2. Add two new folders Style and Script (Right click on AutoCompleteDemo project in solution explorer Add 3. Download jQuery file from need to right click on latest version link and click on save link as. It will get saved as jquery-2.0.3.min.js. Add it inside Script folder of project. 4. Download jQueryUI from was jquery-ui-1.10.3. In case of jQueryUI zip folder will get downloaded extract it. Add file jquery-ui-1.10.3 5. Also add readymade autocomplete css file from jquery 1.10.3themesbaseminified 6. Add new web Form. Example1.aspx Add two new folders Style and Script (Right click on AutoCompleteDemo project in New Folder) Download jQuery file from http://jquery.com/download/. (To download you may click on latest version link and click on save link as. It will get saved as 2.0.3.min.js. Add it inside Script folder of project. Download jQueryUI from http://jqueryui.com/. At the time of writing stable version 1.10.3. In case of jQueryUI zip folder will get downloaded extract it. uiminified jquery-ui.min.js to Script folder. Also add readymade autocomplete css file from jquery-ui- minifiedjquery-ui.min.css to Style folder of project Add new web Form. Example1.aspx Page 5 of 19 Add two new folders Style and Script (Right click on AutoCompleteDemo project in . (To download you may click on latest version link and click on save link as. It will get saved as . At the time of writing stable version 1.10.3. In case of jQueryUI zip folder will get downloaded extract it. .css to Style folder of project
  • 6. 7. After completion of step 3 following snapshot: 8. Drag and drop jquery.js, jquery Example1.aspx or type following 9. Insert following HTML in body 10. Finally add jquery code in head sectionto implement After completion of step 3 to step 6 solution explorer should look as shown in Drag and drop jquery.js, jquery-ui.js and jquery-ui.css files in head section of or type following Insert following HTML in body Finally add jquery code in head sectionto implement autocomplete Page 6 of 19 shown in section of
  • 7. 11. Final code should look as follow: 12. That’s it. You can run your first auto complete example. You should get output as shown in following snapshot: Important Points to Note: • languages is a array of strings. We use it as a source for textbox suggestion. • $("#txtLanguage").autocomplete({ source: languages }); as follow: That’s it. You can run your first auto complete example. You should get output as shown in following snapshot: is a array of strings. We use it as a source for textbox suggestion. ).autocomplete({ source: languages }); Page 7 of 19 That’s it. You can run your first auto complete example. You should get output as is a array of strings. We use it as a source for textbox suggestion.
  • 8. o Above line calls autocomplete() o In this example we are calling autocomplete in its simplest form, where we are only passing one parameter for some other variations in next examples. For complete list of you can refer jQuery-UI API documentation Walkthrough 2: Reading suggestion list for auto In the above example we have hardcoded the suggestion list. But in real life we will be interested in fetching it from database. In • create database and populate it with some data • write web Service to fetch data from database • make use jquery ajax() fuction to call web service asynchronously. • and use result set as source for autocomplete. Steps to follow: 1. Add new database “EmpDB”: Right click on project Server Database autocomplete() function. This is jquery-ui function In this example we are calling autocomplete in its simplest form, where we are only passing one parameter for source flag. i.e languages. We will try some other variations in next examples. For complete list of you can refer UI API documentation http://api.jqueryui.com/ Walkthrough 2: Reading suggestion list for auto-complete from database the above example we have hardcoded the suggestion list. But in real life we will be interested in fetching it from database. In this walkthrough we will create database and populate it with some data write web Service to fetch data from database jquery ajax() fuction to call web service asynchronously. and use result set as source for autocomplete. Add new database “EmpDB”: Right click on project Add New Item Page 8 of 19 function. In this example we are calling autocomplete in its simplest form, where we . We will try some other variations in next examples. For complete list of you can refer complete from database the above example we have hardcoded the suggestion list. But in real life we will be New Item SQL
  • 9. 2. When you will click on Add button message App_Data folder for database. Click Yes. 3. EmpDB will be accessible from Server Explorer. 4. Create new table EmpTable 5. Populate it with some records 6. Add connection string to EmpDB database in web.config file. will be used by web service to connect to database. (copy and paste connection string property of EmpDB as shown in following snapshot) When you will click on Add button message box will pop up asking you to create App_Data folder for database. Click Yes. EmpDB will be accessible from Server Explorer. EmpTable as follow: Populate it with some records Add connection string to EmpDB database in web.config file. This connection string will be used by web service to connect to database. (copy and paste connection string property of EmpDB as shown in following Page 9 of 19 box will pop up asking you to create This connection string (copy and paste connection string property of EmpDB as shown in following
  • 10. 7. Now let us write web service to fetch suggestion data from database 8. Add new folder “Service” 9. Add web service “SuggestionService” in it 10. After following step 7 and 8 structure should look as follow: 11. To read connection string from web.config file we will need WebConfigurationManager will be using ADO.NET to connect to sql server database so add following namespace import statements in SuggestionService.cs Using System.Data.SqlClient; Using System.Web.Configuration; 12. We will be calling this web service from jQuery. By default web service is not from client script. To make it enable we need to add [ScriptService] attribute on web service. If you are using visual studio this tag will get inserted when you create web service but is commented. Just remove comment of following line [System.Web.Script.Services. Now let us write web service to fetch suggestion data from database Add new folder “Service” Add web service “SuggestionService” in it After following step 7 and 8 structure should look as follow: To read connection string from web.config file we will need ConfigurationManagerclass which resides in System.Web.Configuration using ADO.NET to connect to sql server database so add following namespace SuggestionService.cs System.Data.SqlClient; System.Web.Configuration; We will be calling this web service from jQuery. By default web service is not from client script. To make it enable we need to add [ScriptService] attribute on web service. If you are using visual studio this tag will get inserted when you create web service but is commented. Just remove comment of following line [System.Web.Script.Services.ScriptService] Page 10 of 19 System.Web.Configuration. Also we using ADO.NET to connect to sql server database so add following namespace We will be calling this web service from jQuery. By default web service is not callable from client script. To make it enable we need to add [ScriptService] attribute on web service. If you are using visual studio this tag will get inserted when you create web
  • 11. 13. Remove everything inside class SuggestionService. Check 14. Write web method “GetSuggestionList()” as follow: Important Points to Note: • GetSuggestionList() character entered in textbox Remove everything inside class SuggestionService. Check following snapshot: Write web method “GetSuggestionList()” as follow: GetSuggestionList() accepts string pattern. (Which will be sequence of character entered in textbox on aspx page) Page 11 of 19 snapshot: sequence of
  • 12. • GetSuggestionList() returns pattern. For example if we enter “Vanessa” etc. • WebConfigurationMana file and assigns it to string variable • SqlConnection class constructor is using conStr to specify connection string for object con. • Two parameters are passed to i. First is parameterized SQL Query pattern specified in ii. Second is SqlConnection object • cmd.Parameters.AddWithValue() @InputPattern parameter of sql query. • In while loop SqlDataReader object putting it in list object • And in end list object 15. Now add new page – Example2 16. Add textbox and required links as follow: GetSuggestionList() returns list of employee names which contains specified pattern. For example if we enter “sa” it will retrun “sachin”, “sarang WebConfigurationManager class reads connection string from web.config it to string variable conStr. class constructor is using conStr to specify connection string are passed to SqlCommand contructor. parameterized SQL Query to select all employee names having pattern specified in @InputPattern parameter. Second is SqlConnection object con. cmd.Parameters.AddWithValue() is passing value in pattern variable to @InputPattern parameter of sql query. SqlDataReader object rdr is reading records from database and putting it in list object result. And in end list object result is returned. Example2.aspx. Add textbox and required links as follow: Page 12 of 19 which contains specified rang”, web.config class constructor is using conStr to specify connection string to select all employee names having is passing value in pattern variable to is reading records from database and
  • 13. 17. Now add following script in head section: 18. Run the application. And type le output should be as follow: script in head section: Run the application. And type le output should be as follow: Page 13 of 19
  • 14. Important Points to Note: • autocomplete() method have t o source: as we have seen in previous example source should be collection of strings. In previous example we have hardcoded that string array but here we wanted to fetch it from database using web service. That’s why we have set source to suggestionServiceCaller web service asynchronously and wi will be used as source. We can set source to array: as done in previous example string: when a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data callback method flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments response callback method note that first argument is object while second is callback method and not an object. • request object: • response callback method: o minLength: minLength flag is set to 2. So autocomplete will wait till you enter minimum two characters in textbox. Once you enter two characters then only it will trigger source f • ajax() function used in suggestionServiceCaller() (Ajax) request. Here it is responsible to call webservice the characters entered in textbox as json of autocomplete() method it has t method have two flags source and minLength as we have seen in previous example source should be collection of In previous example we have hardcoded that string array but here we fetch it from database using web service. That’s why we have set suggestionServiceCaller. It is a method which is responsible to call asynchronously and will receive list of names. This list of name will be used as source. We can set source to as done in previous example when a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data callback method: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments request object response callback method (explained below). It’s very important t note that first argument is object while second is callback method and not an object. request object: o Object with single property term. o term property refers to current value in textbox response callback method: o Method with single argument data. o data is list that is to be suggested to user. It should depends on term provided minLength flag is set to 2. So autocomplete will wait till you enter minimum two characters in textbox. Once you enter two characters then only it will trigger source function. suggestionServiceCaller(), performs an asynchronous HTTP responsible to call webservice asynchronously and entered in textbox as json. As it is a callback method for method it has two arguments request object and response Page 14 of 19 as we have seen in previous example source should be collection of In previous example we have hardcoded that string array but here we fetch it from database using web service. That’s why we have set responsible to call . This list of name when a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data The third variation, a callback, provides the most request object and very important to note that first argument is object while second is callback method and textbox . It should minLength flag is set to 2. So autocomplete will wait till you enter minimum two characters in textbox. Once you enter two characters then only an asynchronous HTTP asynchronously and passes for source flag response
  • 15. callback method as mentioned above. described below: o url: web service url o data: data to be post to server o datatype: specifying that request is passing json data o type: type is set to post as we are posting data to server. request.term has data entered in textbox to be posted. o success: callback method which should get executed if request is successful. It accepts data from server. this data is the service. Inside success callback method we call data to it. Which will be used by autocomplete() widget as a suggestion list and will get displayed using default css rul second argument for source callback method of autocomplete. o error: callback method which will get called if request fails. Walkthrough 3: Displaying In this walkthrough let us extend our previous example to see more details in suggestion list also to specify submission value. In previous example if we will type “rajesh”. In this case we would lik between two items. as mentioned above. To configure request its using various flags web service url data to be post to server in json format. specifying that request is passing json data type is set to post as we are posting data to server. request.term has data entered in textbox to be posted. callback method which should get executed if request is successful. from server. this data is the suggestion list return by web . Inside success callback method we call response() method data to it. Which will be used by autocomplete() widget as a suggestion list and will get displayed using default css rules. Remember that response is second argument for source callback method of autocomplete. callback method which will get called if request fails. Displaying Extra Details in Suggestion List. In this walkthrough let us extend our previous example to see more details in suggestion list also to specify submission value. In previous example if we will type “ra” it will give you result as follow as there are two In this case we would like to see some extra details in suggestion list to distinguish Page 15 of 19 To configure request its using various flags type is set to post as we are posting data to server. request.term has callback method which should get executed if request is successful. return by web response() method and pass data to it. Which will be used by autocomplete() widget as a suggestion list response is In this walkthrough let us extend our previous example to see more details in suggestion list it will give you result as follow as there are two to distinguish
  • 16. In this walkthrough let us extend our example to keep in mind that city should be s particular item only name should get displayed on text box. This can be achieved as autocomplete • First one is array of strings [ "Choice1", "Choice2" ] • Second is suggestion list with [ { label: "Choice1", value: "value1" }, ... ] • label: The label property is displayed in the suggestion menu • value: The value will be inserted into the input element when a user selects an item Also in real world we wanted to submit id of selected item to server. That can be achieved by specifying id property in suggested item object. Then this property can be used in callback method specified for select flag triggered after selecting specific item from suggested list. Follow the steps to implement it: 1. Add new class SuggestionItem in App_Code folder. let us extend our example to display name and city in suggestion list. But keep in mind that city should be shown in suggestion list only and when we will select particular item only name should get displayed on text box. autocomplete() supports two formats for suggestion list array of strings. That we have used in previous examples [ "Choice1", "Choice2" ] list with object having two properties viz label and [ { label: "Choice1", value: "value1" }, ... ] The label property is displayed in the suggestion menu The value will be inserted into the input element when a user selects an Also in real world we wanted to submit id of selected item to server. That can be achieved by specifying id property in suggested item object. Then this property can be used in select flag of autocomplete(). Select callback method will get specific item from suggested list. Follow the steps to implement it: SuggestionItem in App_Code folder. Page 16 of 19 in suggestion list. But when we will select suggestion list label and value. The value will be inserted into the input element when a user selects an Also in real world we wanted to submit id of selected item to server. That can be achieved by specifying id property in suggested item object. Then this property can be used in method will get
  • 17. 2. Add three automatic properties 3. Modify service as shown in following snapshot ic properties in SuggestionItem class as shown in snapshot Modify service as shown in following snapshot Page 17 of 19 in SuggestionItem class as shown in snapshot
  • 18. 4. Go to Example.aspx. And insert label to display EmpNo of selected item as shown below: 5. Insert select flag to autocomplete widget to specify after selecting an item. 6. Execute the application. 7. Now autocomplete should show name and city in suggestion list as follow: Go to Example.aspx. And insert label to display EmpNo of selected item as shown Insert select flag to autocomplete widget to specify callback method to be triggered Now autocomplete should show name and city in suggestion list as follow: Page 18 of 19 Go to Example.aspx. And insert label to display EmpNo of selected item as shown callback method to be triggered Now autocomplete should show name and city in suggestion list as follow:
  • 19. 8. Also after selecting particular item only name should be displayed in textbox and also select callback should display EmpNo in label. Important Points to Note: • Class SuggestionItem is created with three properties: • Web service is modified to return list of • result is object of List of SuggestionItem • SQL Query is modified to read EmpNo, Name and City • Inside while loop object of datareader object rdr is assigned to properties of SuggestionItem object. And then this object is added to list result. • After completion of loop i.e after reading all the records satisfying object result is returned. • In autocomplete widget only one modification is done item on label. This is done using • Select callback method has selected object in textbox. Using this reference we can access object. Also after selecting particular item only name should be displayed in textbox and ct callback should display EmpNo in label. Class SuggestionItem is created with three properties: id, label and value Web service is modified to return list of SuggestinItem type. List of SuggestionItem type SQL Query is modified to read EmpNo, Name and City Inside while loop object of SuggestionItem is created and relevant values from is assigned to properties of SuggestionItem object. And then list result. completion of loop i.e after reading all the records satisfying the condition; list is returned. In autocomplete widget only one modification is done to display EmpNo item on label. This is done using select callback method. method has two arguments i.e event and ui. ui has reference to selected object in textbox. Using this reference we can access id property Page 19 of 19 Also after selecting particular item only name should be displayed in textbox and value. is created and relevant values from is assigned to properties of SuggestionItem object. And then condition; list to display EmpNo of selected . ui has reference to id property of item