locked
Autocomplete RRS feed

  • Question

  • User-1687766116 posted

    hi 

    i use this code for Autocomplete

    <script>
    $(function () {
    var availableTags = [
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
    ];
    $("#tags").autocomplete({
    source: availableTags
    });
    });
    </script>
    </head>
    <body>

    but i want get list from sql server database

    how i do?

    please help me

    Wednesday, March 4, 2020 2:25 PM

All replies

  • User475983607 posted

    but i want get list from sql server database

    how i do?

    Your question is too vague to answer.  We have no idea what kind of applicaiton you are building; Web Forms, MVC Core... Or what data access library you are using; ADO.NET, Entity framework.  But the steps are very simple....

    1)  User AJAX or fetch to invoke a URL.  2) Write code to query your database when the URL is invoked.  3) Read the autocomplete reference documentation for proper syntax.

    Wednesday, March 4, 2020 2:40 PM
  • User-1687766116 posted

    i use asp.net website and sqldatasource for fill dropdownlist. 

    in this code i want replace mydropdownlist whit jquery combobox

    <title>jQuery UI Autocomplete - Combobox</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
    .custom-combobox {
    ;
    display: inline-block;
    }
    .custom-combobox-toggle {
    ;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
    }
    .custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $(function () {
    $.widget("custom.combobox", {
    _create: function () {
    this.wrapper = $("<span>")
    .addClass("custom-combobox")
    .insertAfter(this.element);

    this.element.hide();
    this._createAutocomplete();
    this._createShowAllButton();
    },

    _createAutocomplete: function () {
    var selected = this.element.children(":selected"),
    value = selected.val() ? selected.text() : "";

    this.input = $("<input>")
    .appendTo(this.wrapper)
    .val(value)
    .attr("title", "")
    .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
    .autocomplete({
    delay: 0,
    minLength: 0,
    source: $.proxy(this, "_source")
    })
    .tooltip({
    classes: {
    "ui-tooltip": "ui-state-highlight"
    }
    });

    this._on(this.input, {
    autocompleteselect: function (event, ui) {
    ui.item.option.selected = true;
    this._trigger("select", event, {
    item: ui.item.option
    });
    },

    autocompletechange: "_removeIfInvalid"
    });
    },

    _createShowAllButton: function () {
    var input = this.input,
    wasOpen = false;

    $("<a>")
    .attr("tabIndex", -1)
    .attr("title", "Show All Items")
    .tooltip()
    .appendTo(this.wrapper)
    .button({
    icons: {
    primary: "ui-icon-triangle-1-s"
    },
    text: false
    })
    .removeClass("ui-corner-all")
    .addClass("custom-combobox-toggle ui-corner-right")
    .on("mousedown", function () {
    wasOpen = input.autocomplete("widget").is(":visible");
    })
    .on("click", function () {
    input.trigger("focus");

    // Close if already visible
    if (wasOpen) {
    return;
    }

    // Pass empty string as value to search for, displaying all results
    input.autocomplete("search", "");
    });
    },

    _source: function (request, response) {
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
    response(this.element.children("option").map(function () {
    var text = $(this).text();
    if (this.value && (!request.term || matcher.test(text)))
    return {
    label: text,
    value: text,
    option: this
    };
    }));
    },

    _removeIfInvalid: function (event, ui) {

    // Selected an item, nothing to do
    if (ui.item) {
    return;
    }

    // Search for a match (case-insensitive)
    var value = this.input.val(),
    valueLowerCase = value.toLowerCase(),
    valid = false;
    this.element.children("option").each(function () {
    if ($(this).text().toLowerCase() === valueLowerCase) {
    this.selected = valid = true;
    return false;
    }
    });

    // Found a match, nothing to do
    if (valid) {
    return;
    }

    // Remove invalid value
    this.input
    .val("")
    .attr("title", value + " didn't match any item")
    .tooltip("open");
    this.element.val("");
    this._delay(function () {
    this.input.tooltip("close").attr("title", "");
    }, 2500);
    this.input.autocomplete("instance").term = "";
    },

    _destroy: function () {
    this.wrapper.remove();
    this.element.show();
    }
    });

    $("#combobox").combobox();
    $("#toggle").on("click", function () {
    $("#combobox").toggle();
    });
    });
    </script>
    </head>
    <body>

    <div class="ui-widget">
    <label>Your preferred programming language: </label>
    <select id="combobox">
    <option value="">Select one...</option>
    <option value="ActionScript">ActionScript</option>
    <option value="AppleScript">AppleScript</option>
    <option value="Asp">Asp</option>
    <option value="BASIC">BASIC</option>
    <option value="C">C</option>
    <option value="C++">C++</option>
    <option value="Clojure">Clojure</option>
    <option value="COBOL">COBOL</option>
    <option value="ColdFusion">ColdFusion</option>
    <option value="Erlang">Erlang</option>
    <option value="Fortran">Fortran</option>
    <option value="Groovy">Groovy</option>
    <option value="Haskell">Haskell</option>
    <option value="Java">Java</option>
    <option value="JavaScript">JavaScript</option>
    <option value="Lisp">Lisp</option>
    <option value="Perl">Perl</option>
    <option value="PHP">PHP</option>
    <option value="Python">Python</option>
    <option value="Ruby">Ruby</option>
    <option value="Scala">Scala</option>
    <option value="Scheme">Scheme</option>
    </select>
    </div>
    <button id="toggle">Show underlying select</button>

    <br />
    <br />
    <br />
    <br />
    <br />
    <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="gradename" DataValueField="gradeid">
    </asp:DropDownList>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:medu8roudConnectionString %>" SelectCommand="SELECT * FROM [grade1]"></asp:SqlDataSource>

    </div>

    Wednesday, March 4, 2020 2:52 PM
  • User-1687766116 posted

    I want bind jquery combobox to sqldatasource in asp.net

    Wednesday, March 4, 2020 2:58 PM
  • User475983607 posted

    I want bind jquery combobox to sqldatasource in asp.net

    Then you'll need to render the JavaScript properly form the code behind.  I'm not sure if it is possible to use the SQLDataSource to render JSON/JavaScript.  

    Perhaps use the AJAX Toolkit autocomplete which works with ASP.NET Web Forms.

    https://ajaxcontroltoolkit.devexpress.com/AutoComplete/AutoComplete.aspx

    Wednesday, March 4, 2020 3:53 PM
  • User288213138 posted

    Hi mehr_83,

    I want bind jquery combobox to sqldatasource in asp.net

    I do not recommend that you try to bind jquery combox to the data source.

    You can use ajaxToolkit control ComboBox to implement the Autocomplete. here a demo for you as a reference.

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <ajaxToolkit:ComboBox ID="ComboBox1" runat="server" DataSourceID="SqlDataSource1" DataTextField="Name" DataValueField="Name" MaxLength="0" style="display: inline;" AutoCompleteMode="SuggestAppend">
                </ajaxToolkit:ComboBox>        
                <hr />
                <asp:Label ID="Label1" runat="server"></asp:Label>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="select * from fiels"></asp:SqlDataSource>

    You can also use this control, AutoCompleteExtender, to do what you want, and this is the reference link:

    https://forums.asp.net/t/2139424.aspx?

    Best regards,

    Sam

    Thursday, March 5, 2020 7:27 AM
  • User-2054057000 posted

    But i want get list from sql server database

    how i do?

    please help me

    You should first create an autocomplete feature using dummy data and then change the dummy data to records that are fetched from the database. I recommend you to read jQuery Autocomplete feature tutorial to learn what I am suggesting.

    Wednesday, March 18, 2020 10:26 AM