Using <datalist> to create a dropdown from AJAX call

Help Requests
1

I have the following code in my html view:

<td>
                                    <input type="text" style="width: 250px;" 
                                            value.bind="selectedStatusCode" list="status_codes">
                                    <datalist name='statusBox' 
                                        id="status_codes" style="width: 250px;" 
                                        tabindex="5" value.bind="selectedStatusCode">
                                        <option model.bind="null"></option>
                                        <optgroup label.bind="statcode[0]" 
                                                repeat.for="statcode of status_code_list"
                                                model.bind="statcode[0]">
                                            <option repeat.for="descr of statcode[1]"
                                            model.bind="descr.statcode_id"
                                            value.bind="descr.statcode_id">
                                        ${descr.statcode_id} - ${descr.descr} 
                                        (${statcode[0]})
                                        </option>
                                        </optgroup>
                                    </datalist>
                                </td>

The list object I have is a group of lists.

I need to be able to display the contents in the select of the list of lists in the dropdown like so:

The lists are organized like so:

AR Accounts ,
[ {173, 'back to user'},
{178, 'sent to billing'}.
],

Do Not Use,
[ {500, 'pandemic hold'},
{520, 'billing is complete'},
],

What I am trying to have happen for the dropdown is to display like this:

<optgroup>AR Accounts
<option>173 - back to user </option>
<option>178 - sent to billing</option>
</optgroup>
<optgroup>
Do Not Use 
<select>[500 - pandemic hold</select>
<select>520 - billing is complete</select>
</optgroup>

From what I’ve read, <optgroup> is not supported in datalists, but I don’t know how else to get things to display.

In my code above, I have the name of the outer list (AR Accounts, etc) displaying in parentheses next to the code, but I still get the following in the dropdown:

173
173 - back to user

How can I create this dropdown so that it doesn’t do that?

I did try the following, but it gave me errors everywhere in my code:

<input type="text" style="width: 250px;" 
                                            value.bind="selectedStatusCode" list="status_codes">
                                    <datalist name='statusBox' 
                                        id="status_codes" style="width: 250px;" 
                                        tabindex="5" value.bind="selectedStatusCode">
                                        <option model.bind="null"></option>
                                        <template
                                                repeat.for="statcode of status_code_list"
                                                model.bind="statcode[0]">
                                            <option repeat.for="descr of statcode[1]"
                                            model.bind="descr.statcode_id"
                                            value.bind="descr.statcode_id">
                                        ${descr.statcode_id} - ${descr.descr} 
                                        (${statcode[0]})
                                        </option>
                                    </tenplate>

Any thoughts would be greatly appreciated.

1 Like
2

Maybe help create a simple gist to help other folks to experiment with their thoughts about your issue? https://gist.dumber.app

2 Likes
3

That was a good idea, but I for some reason cannot get the datalist tag to resolve into the combox, even though I am using the same code as in my app.

Here’s the link in case anyone has ideas:

https://gist.dumber.app/?gist=737bc8f8ce1de6117567e4ea63d6058d

1 Like
4

Here’s a supposedly working as expected gist, based on your gist https://gist.dumber.app/?gist=dbc8fbd344efae1c81846bf17dcd0d0c

I think the issue is related to how the data was created. As the error i got was stat_code[1] is not repeatable.

So instead of declaring:

status_code_list = [
      'Follow-up Codes',
      [
        {
          'abbrev': 'NYW',
          'category' : 'Follow-up Codes',
          'statcode_id' : '100',
          'descr' : 'Not Yet Worked'
        },
        {
          'abbrev' : 'BLI',
          'category' : 'Follow-up Codes',
          'statcode_id' : '101',
          'descr' : 'Billing Incomplete'
        },
        ...

Do:

status_code_list = [
    [
      'Follow-up Codes',
      [
        {
          'abbrev': 'NYW',
          'category' : 'Follow-up Codes',
          'statcode_id' : '100',
          'descr' : 'Not Yet Worked'
        },
        {
          'abbrev' : 'BLI',
          'category' : 'Follow-up Codes',
          'statcode_id' : '101',
          'descr' : 'Billing Incomplete'
        },
        ...
  ],
  [
    '....',
    []
  ],
  [
    '...',
    [...]
  ]
5

I figured out why it’s doing that.

value.bind in the datalist tag functions as the displayed value of the dropdown.

Since I need to track which option is chosen, I need to leave that there.

Are there other options for using a search box with a dropdown list?

I have tried select2, chosen, and selectize, and have not been able to get them to work.

Thanks.