jQuery UI Widgets Forums Lists ComboBox Is possible adding element when writing search box.

This topic contains 3 replies, has 3 voices, and was last updated by  Dimitar 6 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • ziyahan

    I would like to use search box for add element to Combobox. Such as :

    ` var source = [
    “Café Bombón”,
    “Café au lait”,
    “Caffé Corretto”,
    “Café Crema”,
    “Caffé Latte”];
    source: source,
    theme: ‘energyblue’,
    width: ‘200px’,
    height: ’25px’,
    selectedIndex: 0,
    search: function (searchString) {

    $(“#jqxComboBox”).jqxComboBox(‘addItem’, searchString);


    But it does not work. How can I do this?

    Thanks in advance.


    Hello ziyahan,

    This scenario is not supported by jqxComboBox. However, you may try the same, but with remoteAutoComplete set to true (the search callback function is called only in this case):

    <!DOCTYPE html>
    <html lang="en">
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var source = [
                        "Café Bombón",
                        "Café au lait",
                        "Caffé Corretto",
                        "Café Crema",
                        "Caffé Latte"
                        source: source,
                        width: '200px',
                        height: '25px',
                        selectedIndex: 0,
                        remoteAutoComplete: true,
                        search: function (searchString) {
                            $("#jqxComboBox").jqxComboBox('addItem', searchString);
            <div id='jqxComboBox'>

    Best Regards,

    jQWidgets team


    Is this scenario supported by jqxComboBox now i n version > 5?
    I have json datasource and want to add items (when user input strings in select) if they are not in my default datasource.

    This scenario unfortunately does not work for me(

    var source =
                        datatype: "json",
                        datafields: [
                            { name: 'tag' }
                        url: MYURL,
                        async: false
                    var tagsDataAdapter = new $.jqx.dataAdapter(source);
                $("#jqxTagsCombobox").jqxComboBox({ theme:'ofice', remoteAutoComplete: true,
                source: tagsDataAdapter, multiSelect: true, displayMember: "tag", valueMember: "tag", width: 200, height: 25,
                search: function (searchString) {
                            $("#jqxTagsCombobox").jqxComboBox('addItem', searchString);}
    • This reply was modified 6 years, 9 months ago by  Peter__Pan.
    • This reply was modified 6 years, 9 months ago by  Peter__Pan.


    Hello Peter__Pan,

    Please refer to the following solution: http://jsfiddle.net/Dimitar_jQWidgets/1jgb1yju/. In the example, if an item that is not from the source is entered and the Enter key is pressed, the entered value will be added as a new item of the combobox and selected. In your case, instead of source.indexOf(value) === -1, you should check against the records in tagsDataAdapter. We hope this solution is helpful to you.

    Best Regards,

    jQWidgets team

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.