Auto Suggest with drop down list selection into text box RRS feed

  • Question

  • User-1179262497 posted

    Hi Guys, I need help~~~~

    I've got a textbox, with a drop down list. This drop down list contains a list of options, when people click on one selection, it gets inserted into the textbox, provided it's not already in there. The script that I used to do this is:

    function ddlSuburbs_onClick() {
    	        var listBox = document.getElementById('<%= ddlSuburbs.ClientID %>');
    	        var textbox = document.getElementById('<%= txbSuburb.ClientID %>');
    	        var totalContent = textbox.value.split("; ");
    	        if (textbox.value == '') {
    	            textbox.value = listBox.options[listBox.selectedIndex].text;
    	        else {
    	            for (var i = 0; i < totalContent.length; i++) {
    	                if (totalContent[i] == listBox.options[listBox.selectedIndex].text) {
    	                    return false;
    	            textbox.value += "; " + listBox.options[listBox.selectedIndex].text;
    	        return false;

    And this is the drop down list:

     <select id="ddlSuburbs" runat="server"  multiple class="suburbs" onclick="return ddlSuburbs_onClick()"  visible="false"   ></select>

     <asp:TextBox CssClass="long" id="txbSuburb" runat="server" ></asp:TextBox> 

    Now, I have just used this Auto Suggest plugin, which is pretty cool:


    The thing is, Auto Suggest now works, but I still wanna keep this drop down list working for users where they can just click on a suburb and it gets inserted into the textbox. Does anyone know how I could archieve this?

    I have the JQuery script as:

     $(document).ready(function() {
    	        $("#<%=txbSuburb.ClientID %>").autoSuggest("/GetSuburbs.ashx", { selectedItemProp: "name", searchObjProps: "name", asHtmlID:"suburbs" });

    Friday, October 19, 2012 11:11 PM

All replies

  • User-359936451 posted

    You really did not explain what is not working. If your autocomplete is working on the textbox, why won't the listbox still work? If I understand you correctly.

    Are you getting an error?

    Friday, January 12, 2018 4:49 PM
  • User2053451246 posted

    EDIT: Dang it user March11.  I just noticed this post is from 2012.  You posting a reply made it show as an active thread to answer.

    I think you are making this harder that it needs to be.  The jQuery UI Autocomplete widget is way easier to setup.  Just assign some class to the textbox (in the below code I used ".autocomplete" for the class name) and use this JavaScript (the below is shorthand for the document ready JavaScript you already have):

    $(function () {
        $(".autocomplete").autocomplete({ minLength: 0, source: '@Url.Action("List", "BenefitDescription")' }).focus(function () {

    Make sure to keep the minLength at 0.  Otherwise the list will not appear until you type something.

    As long as you can make whatever you use for source: return a Json result, you get a text box with autocomplete suggestions, and you can click on the item to fill the box like a normal dropdown. I use MVC but this should get you started on what you need to put in your code-behind file:

    [OutputCache(Duration = 60)]
    public async Task<ActionResult> List(string term)
        var results = await (from p in quoting.vPlanBenefitDescriptionsDistinctBuiltIns.Where(w => w.DisplayValue.Contains(term)).OrderBy(o => o.DisplayValue) select p.DisplayValue).AsNoTracking().ToListAsync();
        return Json(results.ToArray(), JsonRequestBehavior.AllowGet);


    Friday, January 12, 2018 8:02 PM
  • User-359936451 posted

    ryanbesko, missed the date. Oh well, rather have an answer on it then have it hanging in the UNANSWERED. Not sure why MS doesn't clean that up. They wacked points off of everyone because they changed the scoring process for the site. I would rather see the junk get removed.

    Tuesday, January 16, 2018 5:21 PM