jQuery UI Widgets › Forums › Lists › ComboBox › Search multiple fields, display only one

Tagged: , , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  gfxdude2010 9 years, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Search multiple fields, display only one Posts
  • June 6, 2015 at 5:34 pm Search multiple fields, display only one #72116

    gfxdude2010
    Participant

    Given that the jqxComboBox has the displayMember property, it would seem that I could create a concatenated string as one of the datafield properties to use to search, and display another datafield when the user selects the item.

    I have a few different needs, for a few different types of comboboxes. The current situation is I need a way of selecting Contact models that are connected to Accounts and Tickets.

    I’m a bit confused by the documentation, as there are instances where a jqxDataAdapter is used for the source of the jqxComboBox, and others that just use an array of objects. So far, my implementation for this combobox hasn’t shown need for the adapter, and thus I’m only using an array of objects for the source.

    
function updateContacts(account)
{
    contactsComboBox = $("#contactcombobox");

    var accountContacts = [];
    var ticketContacts = [];

    $.ajax({
        dataType: "json",
        async: false,
        url: "{{ getList('accountcontacts') }}/" + account,
        success: function(result)
        {
            $(result.data).each(function()
            {
                this.group = "Account Contacts";
            });

            accountContacts = result.data;
            // console.log(accountContacts);
        }
    });

    $.ajax({
        dataType: "json",
        async: false,
        url: "{{ getList('ticketcontacts', $ticket->tck_id) }}",
        success: function(result)
        {
            $(result.data).each(function()
            {
                this.group = "Ticket Contacts";
            });

            ticketContacts = result.data;
            // console.log(ticketContacts);
        }
    });

    var dataSource = [];
    $.each([accountContacts, ticketContacts], function()
    {
        $.each(this, function()
        {
            dataSource.push({
                html: "<div><div>Name: " + this.label + "</div><div>Test</div><div>Test2</div></div>",
                label: "bob", // This is what gets searched
                display: this.label,
                value: this.value,
                group: this.group
            });
        });
    });
    console.log(dataSource);

    var newComboBox = $("<div></div>");

    newComboBox.jqxComboBox({ source: dataSource, theme: THEME, disabled: false, displayMember: "display", valueMember: "value" });
}

    I can’t find any documentation as to what jqxComboBox does when the source is not a data adapter, or what object keys it looks for. But, per the examples, it seems to look for the html key to get the data to display in the dropdown list, label to be the field that gets searched and group to be the group labels.

    It is my goal to have a field where I concatenate the contact’s name, phone number and position to be the field that gets searched, an html (or I can use the combobox renderer) that is the data to display in the dropdown, while having a display field that only places the contact’s name in the textbox when the user selects the contact.

    Would this functionality be possible by using a jqxDataAdapter as the source? What would be the proper dataFields to accommodate searching a different field that what is displayed?

    Thanks for any help you can provide.

    June 8, 2015 at 6:16 am Search multiple fields, display only one #72131

    Dimitar
    Participant

    Hello gfxdude2010,

    Here is how to achieve your requirement using the renderer and renderSelectedItem callback functions. You can search by both first name and last name:

    <!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.11.1.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/jqxdata.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 data = [{ FirstName: 'Bob', LastName: 'Andrews' }, { FirstName: 'Stephen', LastName: 'Johnson'}];

                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'FirstName' },
                        { name: 'LastName' }
                    ],
                    localdata: data,
                    async: false
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    beforeLoadComplete: function (data) {
                        var newArray = [];
                        for (var i = 0; i < data.length; i++) {
                            newArray.push({ FirstName: data[i].FirstName + '&' + data[i].LastName, LastName: data[i].LastName });
                        }
                        return newArray;
                    }
                });

                // Create a jqxComboBox
                $("#jqxWidget").jqxComboBox({ selectedIndex: 0, source: dataAdapter, displayMember: "FirstName", valueMember: "LastName", width: 200, height: 25, searchMode: 'containsignorecase',
                    renderer: function (index, label, value) {
                        var FirstName = label.slice(0, label.indexOf('&'));
                        return FirstName;
                    }, renderSelectedItem: function (index, item) {
                        var FirstName = item.label.slice(0, item.label.indexOf('&'));
                        return FirstName;
                    }
                });
            });
        </script>
        <div id='jqxWidget'>
        </div>
        <div style="font-size: 12px; font-family: Verdana;" id="selectionlog">
        </div>
    </div>
</body>
</html>

    Best Regards,
    Dimitar

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

    June 8, 2015 at 1:44 pm Search multiple fields, display only one #72168

    gfxdude2010
    Participant

    Thank you Dimitar for the example provided. I have been able to achieve my goal, and search 6 different fields, display only the fields that are present for a record, and only display the contact’s name as the selected member.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.