.Net, Ajax, ASP.NET, AutoComplete, JQuery, Programming, VB.NET, Web Development, Web Service

Using a JQuery AutoComplete Widget with an ASP.NET Web Service

I’ve been playing around with hooking up the JQuery AutoComplete widget with an ASP.NET Web Service. This is a really neat idea that adds a lot of whizzbang to a standard Web-based form. In theory one could also use ASP.NET UpdatePanel controls with traditional ASP.NET/HTML form controls, but I really wanted to look further into the JQuery Ajax functionality since this fits together very neatly with the JQuery AutoComplete widget.

I found three really good articles on the topic that I am listing below:

  1. Mudassar Khan’s ASP Snippets Blog article – Implement jQuery Autocomplete using Web Service in ASP.Net
  2. Andy Marshall’s article on CodeProject – Introduction to using jQuery with Web Services
  3. Luca Congiu’s article on MSDN – Use Jquery Autocomplete With Web Service (ASMX) DataSource

From reading the articles I have been able to adapt the information these authors presented into the logic I am looking for.

The Desired Functionality

Specifically what I am looking to do is to have a Web form with a text entry area that will offer a user suggestions for text while a user is  typing. The options should be selectable and should pass an id value.

Furthermore, the suggestion list will kick in after the user has entered a minimum of two characters and will match anywhere within the database name field text for matches to show. To reduce lag and the amount of data being transmitted I am capping the returned results to a maximum of 500. Furthermore I am using the JSON protocol to keep the transferred data lightweight.

Continue reading “Using a JQuery AutoComplete Widget with an ASP.NET Web Service”

Advertisement
AutoComplete, Combobox, JavaScript, JQuery, Programming

JQuery Editable Select List – How to Duplicate the Value into a Text Box as it is Being Entered

Editable Select List Text Duplication
Editable Select List Text Duplication

Editable Select lists are a useful feature offered by JQuery through the JQuery-Ui ComboBox widget.

In an earlier article I explained how to set up a basic JQuery ComboBox widget, which I will expand on in today’s article.

So what is this article about? Bottom line is that I wanted to create something that looks like the above image, except that I wanted the duplication area to remain hidden when the form was to be submitted. How it should work is that as a user either types into the editable select list, or selects a value from the list of options, the text entered/selected should immediately be duplicated to a hidden area. For demonstration purposes, though, I have left the duplication area visible so that you can see the logic in action.

Continue reading “JQuery Editable Select List – How to Duplicate the Value into a Text Box as it is Being Entered”

AutoComplete, JQuery, Programming

JQuery – Basic AutoComplete Example with Code

JQuery AutoComplete Basic UI
JQuery AutoComplete Basic UI

I am taking a look into the JQuery AutoComplete widget and wanted to create an example with the most simple and scaled down functionality possible. In the image to the left is an example of what this looks like in action. It is basically an HTML text area that is hooked up to a static array of options.

What is an AutoComplete Widget?

Continue reading “JQuery – Basic AutoComplete Example with Code”