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
    Participant

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

    ` var source = [
    “Affogato”,
    “Americano”,
    “Bicerin”,
    “Breve”,
    “Café Bombón”,
    “Café au lait”,
    “Caffé Corretto”,
    “Café Crema”,
    “Caffé Latte”];
    $(“#jqxComboBox”).jqxComboBox({
    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.


    Dimitar
    Participant

    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">
    <head>
        <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>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var source = [
                        "Affogato",
                        "Americano",
                        "Bicerin",
                        "Breve",
                        "Café Bombón",
                        "Café au lait",
                        "Caffé Corretto",
                        "Café Crema",
                        "Caffé Latte"
                    ];
                    $("#jqxComboBox").jqxComboBox({
                        source: source,
                        width: '200px',
                        height: '25px',
                        selectedIndex: 0,
                        remoteAutoComplete: true,
                        search: function (searchString) {
                            $("#jqxComboBox").jqxComboBox('addItem', searchString);
                        }
                    });
                });
            </script>
            <div id='jqxComboBox'>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Peter__Pan
    Participant

    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.

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.