Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


ASP.NET C# autocomplete

Posted on 2009-03-31
Medium Priority
Last Modified: 2012-05-06
I am trying to implement something similar to Google search where user enter values in textbox and a list of suggested values pops up queried from a database table and when the user chooses a value, only a section of text is pasted on the text box.  

For instance:
User enters:  Jo
Suggestion:  "John Q - hollywood actor"
                    "Jo Jo - pop singer"

but when user chooses "John Q - hollywood actor", only "John Q" is pasted on the text box.  

Question by:nathanmle
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4

Expert Comment

ID: 24033174
This is my favorite autocomplete plugin - very highly recommended:

This is a jQuery plugin, syou'll need the jquery library. If you want to stick with straigt javascript go with this:

You need only maniupluate the javascript with C# to get your desired effect.

-- jq

Author Comment

ID: 24034456

Thank you for your recommendation, but I wonder if you could give me a more specific example where I could use Web Services ...etc.  Thank you again.

Expert Comment

ID: 24034497
What? Do you want the webservice to do the lookup for you, or do you want to get the list from a webservice, or do you want a pre made webservice that does autocomplete (not that this even exists).

Please be more specific.

If you want to get the list of data from a WSDL then just consume it and edit the javascript code to use it.

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.


Expert Comment

ID: 24034507
Like, here is the file that the javascript uses. Just consume the webservice and do a loop and populate all the values and bam - there is your autocomplete list.

      <cfset debug = false />

      <cfparam name="url.q" type="string" />

            // create an array from arugments
            function createCityQuery(){
                  var q = queryNew("CityId, City");
                  var i = 0;
                  var len = arrayLen(arguments);

                  for( i=1; i lte len; i=i+1 ){
                        querySetCell(q, "CityId", i);
                        querySetCell(q, "City", trim(arguments[i]));
                  return q;

            // create an query from a list of cities
            getCities = createCityQuery(
                  "Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron",
                  "Albany", "Alexandria", "Alger", "Alledonia", "Alliance", "Alpha", "Alvada",
                  "Alvordton", "Amanda", "Amelia", "Amesville", "Amherst", "Amlin", "Amsden",
                  "Amsterdam", "Andover", "Anna", "Ansonia", "Antwerp", "Apple Creek", "Arcadia",
                  "Arcanum", "Archbold", "Arlington", "Ashland", "Ashley", "Ashtabula", "Ashville",
                  "Athens", "Attica", "Atwater", "Augusta", "Aurora", "Austinburg", "Ava", "Avon",
                  "Avon Lake", "Bainbridge", "Bakersville", "Baltic", "Baltimore", "Bannock",
                  "Barberton", "Barlow", "Barnesville", "Bartlett", "Barton", "Bascom", "Batavia",
                  "Bath", "Bay Village", "Beach City", "Beachwood", "Beallsville", "Beaver",
                  "Beaverdam", "Bedford", "Bellaire", "Bellbrook", "Belle Center", "Belle Valley",
                  "Bellefontaine", "Bellevue", "Bellville", "Belmont", "Belmore", "Beloit", "Belpre",
                  "Benton Ridge", "Bentonville", "Berea", "Bergholz", "Berkey", "Berlin",
                  "Berlin Center", "Berlin Heights", "Bethel", "Bethesda", "Bettsville", "Beverly",
                  "Bidwell", "Big Prairie", "Birmingham", "Blacklick", "Bladensburg", "Blaine",
                  "Blakeslee", "Blanchester", "Blissfield", "Bloomdale", "Bloomingburg",
                  "Bloomingdale", "Bloomville", "Blue Creek", "Blue Rock", "Bluffton",
                  "Bolivar", "Botkins", "Bourneville", "Bowerston", "Bowersville",
                  "Bowling Green", "Bradford", "Bradner", "Brady Lake", "Brecksville",
                  "Bremen", "Brewster", "Brice", "Bridgeport", "Brilliant", "Brinkhaven",
                  "Bristolville", "Broadview Heights", "Broadway", "Brookfield", "Brookpark",
                  "Brookville", "Brownsville", "Brunswick", "Bryan", "Buchtel", "Buckeye Lake",
                  "Buckland", "Bucyrus", "Buffalo", "Buford", "Burbank", "Burghill", "Burgoon",
                  "Burkettsville", "Burton", "Butler", "Byesville", "Cable", "Cadiz", "Cairo",
                  "Caldwell", "Caledonia", "Cambridge", "Camden", "Cameron", "Camp Dennison",
                  "Campbell", "Canal Fulton", "Canal Winchester", "Canfield", "Canton", "Carbon Hill",
                  "Carbondale", "Cardington", "Carey", "Carroll", "Carrollton", "Casstown",
                  "Castalia", "Catawba", "Cecil", "Cedarville", "Celina", "Centerburg",
                  "Chagrin Falls", "Chandlersville", "Chardon", "Charm", "Chatfield", "Chauncey",
                  "Cherry Fork", "Chesapeake", "Cheshire", "Chester", "Chesterhill", "Chesterland",
                  "Chesterville", "Chickasaw", "Chillicothe", "Chilo", "Chippewa Lake",
                  "Christiansburg", "Cincinnati", "Circleville", "Clarington", "Clarksburg",
                  "Clarksville", "Clay Center", "Clayton", "Cleveland", "Cleves", "Clifton",
                  "Clinton", "Cloverdale", "Clyde", "Coal Run", "Coalton", "Coldwater", "Colerain",
                  "College Corner", "Collins", "Collinsville", "Colton", "Columbia Station",
                  "Columbiana", "Columbus", "Columbus Grove", "Commercial Point", "Conesville",
                  "Conneaut", "Conover", "Continental", "Convoy", "Coolville", "Corning", "Cortland",
                  "Coshocton", "Covington", "Creola", "Crestline", "Creston", "Crooksville",
                  "Croton", "Crown City", "Cuba", "Cumberland", "Curtice", "Custar", "Cutler",
                  "Cuyahoga Falls", "Cygnet", "Cynthiana", "Dalton", "Damascus", "Danville",
                  "Dayton", "De Graff", "Decatur", "Deerfield", "Deersville", "Defiance",
                  "Delaware", "Dellroy", "Delphos", "Delta", "Dennison", "Derby", "Derwent",
                  "Deshler", "Dexter City", "Diamond", "Dillonvale", "Dola", "Donnelsville",
                  "Dorset", "Dover", "Doylestown", "Dresden", "Dublin", "Dunbridge", "Duncan Falls",
                  "Dundee", "Dunkirk", "Dupont", "East Claridon", "East Fultonham",
                  "East Liberty", "East Liverpool", "East Palestine", "East Rochester",
                  "East Sparta", "East Springfield", "Eastlake", "Eaton", "Edgerton", "Edison",
                  "Edon", "Eldorado", "Elgin", "Elkton", "Ellsworth", "Elmore", "Elyria",
                  "Empire", "Englewood", "Enon", "Etna", "Euclid", "Evansport", "Fairborn",
                  "Fairfield", "Fairpoint", "Fairview", "Farmdale", "Farmer", "Farmersville",
                  "Fayette", "Fayetteville", "Feesburg", "Felicity", "Findlay", "Flat Rock",
                  "Fleming", "Fletcher", "Flushing", "Forest", "Fort Jennings", "Fort Loramie",
                  "Fort Recovery", "Fostoria", "Fowler", "Frankfort", "Franklin",
                  "Franklin Furnace", "Frazeysburg", "Fredericksburg", "Fredericktown",
                  "Freeport", "Fremont", "Fresno", "Friendship", "Fulton", "Fultonham",
                  "Galena", "Galion", "Gallipolis", "Galloway", "Gambier", "Garrettsville",
                  "Gates Mills", "Geneva", "Genoa", "Georgetown", "Germantown", "Gettysburg",
                  "Gibsonburg", "Girard", "Glandorf", "Glencoe", "Glenford", "Glenmont",
                  "Glouster", "Gnadenhutten", "Gomer", "Goshen", "Grafton", "Grand Rapids",
                  "Grand River", "Granville", "Gratiot", "Gratis", "Graysville", "Graytown",
                  "Green", "Green Camp", "Green Springs", "Greenfield", "Greenford",
                  "Greentown", "Greenville", "Greenwich", "Grelton", "Grove City",
                  "Groveport", "Grover Hill", "Guysville", "Gypsum", "Hallsville",
                  "Hamden", "Hamersville", "Hamilton", "Hamler", "Hammondsville",
                  "Hannibal", "Hanoverton", "Harbor View", "Harlem Springs", "Harpster",
                  "Harrisburg", "Harrison", "Harrisville", "Harrod", "Hartford", "Hartville",
                  "Harveysburg", "Haskins", "Haverhill", "Haviland", "Haydenville", "Hayesville",
                  "Heath", "Hebron", "Helena", "Hicksville", "Higginsport", "Highland", "Hilliard",
                  "Hillsboro", "Hinckley", "Hiram", "Hockingport", "Holgate", "Holland",
                  "Hollansburg", "Holloway", "Holmesville", "Homer", "Homerville", "Homeworth",
                  "Hooven", "Hopedale", "Hopewell", "Houston", "Howard", "Hoytville", "Hubbard",
                  "Hudson", "Huntsburg", "Huntsville", "Huron", "Iberia", "Independence",
                  "Irondale", "Ironton", "Irwin", "Isle Saint George", "Jackson", "Jackson Center",
                  "Jacksontown", "Jacksonville", "Jacobsburg", "Jamestown", "Jasper",
                  "Jefferson", "Jeffersonville", "Jenera", "Jeromesville", "Jerry City",
                  "Jerusalem", "Jewell", "Jewett", "Johnstown", "Junction City", "Kalida",
                  "Kansas", "Keene", "Kelleys Island", "Kensington", "Kent", "Kenton",
                  "Kerr", "Kettlersville", "Kidron", "Kilbourne", "Killbuck", "Kimbolton",
                  "Kings Mills", "Kingston", "Kingsville", "Kinsman", "Kipling", "Kipton",
                  "Kirby", "Kirkersville", "Kitts Hill", "Kunkle", "La Rue", "Lacarne",
                  "Lafayette", "Lafferty", "Lagrange", "Laings", "Lake Milton", "Lakemore",
                  "Lakeside Marblehead", "Lakeview", "Lakeville", "Lakewood", "Lancaster",
                  "Langsville", "Lansing", "Latham", "Latty", "Laura", "Laurelville",
                  "Leavittsburg", "Lebanon", "Lees Creek", "Leesburg", "Leesville",
                  "Leetonia", "Leipsic", "Lemoyne", "Lewis Center", "Lewisburg",
                  "Lewistown", "Lewisville", "Liberty Center", "Lima", "Limaville",
                  "Lindsey", "Lisbon", "Litchfield", "Lithopolis", "Little Hocking",
                  "Lockbourne", "Lodi", "Logan", "London", "Londonderry",
                  "Long Bottom", "Lorain", "Lore City", "Loudonville", "Louisville",
                  "Loveland", "Lowell", "Lowellville", "Lower Salem", "Lucas",
                  "Lucasville", "Luckey", "Ludlow Falls", "Lynchburg", "Lynx",
                  "Lyons", "Macedonia", "Macksburg", "Madison", "Magnetic Springs",
                  "Magnolia", "Maineville", "Malaga", "Malinta", "Malta", "Malvern",
                  "Manchester", "Mansfield", "Mantua", "Maple Heights", "Maplewood",
                  "Marathon", "Marengo", "Maria Stein", "Marietta", "Marion",
                  "Mark Center", "Marshallville", "Martel", "Martin", "Martins Ferry",
                  "Martinsburg", "Martinsville", "Marysville", "Mason", "Massillon",
                  "Masury", "Maumee", "Maximo", "Maynard", "Mc Arthur", "Mc Clure",
                  "Mc Comb", "Mc Connelsville", "Mc Cutchenville", "Mc Dermott",
                  "Mc Donald", "Mc Guffey", "Mechanicsburg", "Mechanicstown",
                  "Medina", "Medway", "Melmore", "Melrose", "Mendon", "Mentor",
                  "Mesopotamia", "Metamora", "Miamisburg", "Miamitown", "Miamiville",
                  "Middle Bass", "Middle Point", "Middlebranch", "Middleburg",
                  "Middlefield", "Middleport", "Middletown", "Midland", "Midvale",
                  "Milan", "Milford", "Milford Center", "Millbury", "Milledgeville",
                  "Miller City", "Millersburg", "Millersport", "Millfield",
                  "Milton Center", "Mineral City", "Mineral Ridge", "Minerva",
                  "Minford", "Mingo", "Mingo Junction", "Minster", "Mogadore",
                  "Monclova", "Monroe", "Monroeville", "Montezuma", "Montpelier",
                  "Montville", "Morral", "Morristown", "Morrow", "Moscow",
                  "Mount Blanchard", "Mount Cory", "Mount Eaton", "Mount Gilead",
                  "Mount Hope", "Mount Liberty", "Mount Orab", "Mount Perry",
                  "Mount Pleasant", "Mount Saint Joseph", "Mount Sterling",
                  "Mount Vernon", "Mount Victory", "Mowrystown", "Moxahala",
                  "Munroe Falls", "Murray City", "Nankin", "Napoleon", "Nashport",
                  "Nashville", "Navarre", "Neapolis", "Neffs", "Negley",
                  "Nelsonville", "Nevada", "Neville", "New Albany", "New Athens",
                  "New Bavaria", "New Bloomington", "New Bremen", "New Carlisle",
                  "New Concord", "New Hampshire", "New Haven", "New Holland",
                  "New Knoxville", "New Lebanon", "New Lexington", "New London",
                  "New Madison", "New Marshfield", "New Matamoras", "New Middletown",
                  "New Paris", "New Philadelphia", "New Plymouth", "New Richmond",
                  "New Riegel", "New Rumley", "New Springfield", "New Straitsville",
                  "New Vienna", "New Washington", "New Waterford", "New Weston",
                  "Newark", "Newbury", "Newcomerstown", "Newport", "Newton Falls",
                  "Newtonsville", "Ney", "Niles", "North Baltimore", "North Bend",
                  "North Benton", "North Bloomfield", "North Fairfield",
                  "North Georgetown", "North Hampton", "North Jackson",
                  "North Kingsville", "North Lawrence", "North Lewisburg",
                  "North Lima", "North Olmsted", "North Ridgeville", "North Robinson",
                  "North Royalton", "North Star", "Northfield", "Northwood", "Norwalk",
                  "Norwich", "Nova", "Novelty", "Oak Harbor", "Oak Hill", "Oakwood",
                  "Oberlin", "Oceola", "Ohio City", "Okeana", "Okolona", "Old Fort",
                  "Old Washington", "Olmsted Falls", "Ontario", "Orangeville",
                  "Oregon", "Oregonia", "Orient", "Orrville", "Orwell", "Osgood",
                  "Ostrander", "Ottawa", "Ottoville", "Otway", "Overpeck",
                  "Owensville", "Oxford", "Painesville", "Palestine", "Pandora",
                  "Paris", "Parkman", "Pataskala", "Patriot", "Paulding", "Payne",
                  "Pedro", "Peebles", "Pemberton", "Pemberville", "Peninsula",
                  "Perry", "Perrysburg", "Perrysville", "Petersburg", "Pettisville",
                  "Phillipsburg", "Philo", "Pickerington", "Piedmont", "Pierpont",
                  "Piketon", "Piney Fork", "Pioneer", "Piqua", "Pitsburg",
                  "Plain City", "Plainfield", "Pleasant City", "Pleasant Hill",
                  "Pleasant Plain", "Pleasantville", "Plymouth", "Polk",
                  "Pomeroy", "Port Clinton", "Port Jefferson", "Port Washington",
                  "Port William", "Portage", "Portland", "Portsmouth", "Potsdam",
                  "Powell", "Powhatan Point", "Proctorville", "Prospect", "Put in Bay",
                  "Quaker City", "Quincy", "Racine", "Radnor", "Randolph", "Rarden",
                  "Ravenna", "Rawson", "Ray", "Rayland", "Raymond", "Reedsville",
                  "Reesville", "Reno", "Republic", "Reynoldsburg", "Richfield",
                  "Richmond", "Richmond Dale", "Richwood", "Ridgeville Corners",
                  "Ridgeway", "Rio Grande", "Ripley", "Risingsun", "Rittman",
                  "Robertsville", "Rock Camp", "Rock Creek", "Rockbridge", "Rockford",
                  "Rocky Ridge", "Rocky River", "Rogers", "Rome", "Rootstown", "Roseville",
                  "Rosewood", "Ross", "Rossburg", "Rossford", "Roundhead", "Rudolph",
                  "Rushsylvania", "Rushville", "Russells Point", "Russellville", "Russia",
                  "Rutland", "Sabina", "Saint Clairsville", "Saint Henry", "Saint Johns",
                  "Saint Louisville", "Saint Marys", "Saint Paris", "Salem", "Salesville",
                  "Salineville", "Sandusky", "Sandyville", "Sarahsville", "Sardinia",
                  "Sardis", "Savannah", "Scio", "Scioto Furnace", "Scott", "Scottown",
                  "Seaman", "Sebring", "Sedalia", "Senecaville", "Seven Mile", "Seville",
                  "Shade", "Shadyside", "Shandon", "Sharon Center", "Sharpsburg",
                  "Shauck", "Shawnee", "Sheffield Lake", "Shelby", "Sherrodsville",
                  "Sherwood", "Shiloh", "Short Creek", "Shreve", "Sidney", "Sinking Spring",
                  "Smithfield", "Smithville", "Solon", "Somerdale", "Somerset",
                  "Somerville", "South Bloomingville", "South Charleston", "South Lebanon",
                  "South Point", "South Salem", "South Solon", "South Vienna",
                  "South Webster", "Southington", "Sparta", "Spencer", "Spencerville",
                  "Spring Valley", "Springboro", "Springfield", "Stafford", "Sterling",
                  "Steubenville", "Stewart", "Stillwater", "Stockdale", "Stockport",
                  "Stone Creek", "Stony Ridge", "Stout", "Stoutsville", "Stow", "Strasburg",
                  "Stratton", "Streetsboro", "Strongsville", "Struthers", "Stryker",
                  "Sugar Grove", "Sugarcreek", "Sullivan", "Sulphur Springs", "Summerfield",
                  "Summit Station", "Summitville", "Sunbury", "Swanton", "Sycamore",
                  "Sycamore Valley", "Sylvania", "Syracuse", "Tallmadge", "Tarlton",
                  "Terrace Park", "The Plains", "Thompson", "Thornville", "Thurman",
                  "Thurston", "Tiffin", "Tiltonsville", "Tipp City", "Tippecanoe", "Tiro",
                  "Toledo", "Tontogany", "Torch", "Toronto", "Tremont City", "Trenton",
                  "Trimble", "Trinway", "Troy", "Tuppers Plains", "Tuscarawas", "Twinsburg",
                  "Uhrichsville", "Union City", "Union Furnace", "Unionport", "Uniontown",
                  "Unionville", "Unionville Center", "Uniopolis", "Upper Sandusky", "Urbana",
                  "Utica", "Valley City", "Van Buren", "Van Wert", "Vandalia", "Vanlue",
                  "Vaughnsville", "Venedocia", "Vermilion", "Verona", "Versailles",
                  "Vickery", "Vienna", "Vincent", "Vinton", "Wadsworth", "Wakefield",
                  "Wakeman", "Walbridge", "Waldo", "Walhonding", "Walnut Creek", "Wapakoneta",
                  "Warnock", "Warren", "Warsaw", "Washington Court House",
                  "Washingtonville", "Waterford", "Waterloo", "Watertown", "Waterville",
                  "Wauseon", "Waverly", "Wayland", "Wayne", "Waynesburg", "Waynesfield",
                  "Waynesville", "Wellington", "Wellston", "Wellsville", "West Alexandria",
                  "West Chester", "West Elkton", "West Farmington", "West Jefferson",
                  "West Lafayette", "West Liberty", "West Manchester", "West Mansfield",
                  "West Millgrove", "West Milton", "West Point", "West Portsmouth",
                  "West Rushville", "West Salem", "West Union", "West Unity", "Westerville",
                  "Westfield Center", "Westlake", "Weston", "Westville", "Wharton",
                  "Wheelersburg", "Whipple", "White Cottage", "Whitehouse", "Wickliffe",
                  "Wilberforce", "Wilkesville", "Willard", "Williamsburg", "Williamsfield",
                  "Williamsport", "Williamstown", "Williston", "Willoughby", "Willow Wood",
                  "Willshire", "Wilmington", "Wilmot", "Winchester", "Windham", "Windsor",
                  "Winesburg", "Wingett Run", "Winona", "Wolf Run", "Woodsfield",
                  "Woodstock", "Woodville", "Wooster", "Wren", "Xenia", "Yellow Springs",
                  "Yorkshire", "Yorkville", "Youngstown", "Zaleski", "Zanesfield", "Zanesville",

      <cfquery name="getMatches" dbtype="query">
                  CityId, City
                  lower(City) like '#lCase(url.q)#%'

</cfsilent><cfoutput query="getMatches">#getMatches.City#|#getMatches.CityId#


Author Comment

ID: 24034574
I apologize for the confusion.  I meant the .NET Web Services.   In my situation, I can't simply dump all values in memory and then consume it.   The result is too big.  For each additional character entry, the web service then looks up in the DB and provide a new list of suggestion.

Expert Comment

ID: 24034636
Hmm that is a bit more complicated. You will need to build an AJAX page that constantly hits the datasourec (in this case the webservice) and rebuilds the list as they type.

Obviously that is intensive on the server and client. THe solution above supports AJAX but its ur call to whethere its worth it or not.

So, in the ASPX you create, it would look for a parameter (which is what the user is typing) and on keypress event you'd make an HTTP XML request ot the aspx page, which in turn calls the webservice (or whatever) and rebuilds that comma delimited list.

Its pretty simple. Let me knw if u need more help.

-- jq

Author Comment

ID: 24034664
Thank you, Jenni.

I have a pretty good idea in general, but I wonder how to do the following:

For instance:
User enters:  Jo
Suggestion:  "John Q - hollywood actor"
                    "Jo Jo - pop singer"

but when user chooses "John Q - hollywood actor", only "John Q" is pasted on the text box.  

Accepted Solution

JenniQ earned 2000 total points
ID: 24034718
So you want to sub string everything past the  hypen ( - )?
Meaning everything starting with the hyphen and to the right of the hyphen you'll want to remove?

Then you'd write a lil' javacript:

<script type="text/javascript">

var str="Hello world!";


But you need to find the first instance of the hyphen, prolly move one space to the left to accommodate the empty space (or do a .ToString().Trim() in C#) and then bam you got ur value.

This is simple string manipulation which is the basis of programming - I recommend you read up on it!

-- JQ

Author Closing Comment

ID: 31565041
Thank you for your help.

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
If you don't have the right permissions set for your WordPress location in IIS, you won't be able to perform automatic updates. Here's how to fix the problem.
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA:…
Suggested Courses

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question