Topic: Can you put autocomplete in a table cell?

Kelly Garvy pro asked 3 years ago


Hi there,

I'm wondering if it's possible to use the autocomplete function in a data table cell? It doesn't seem to be working for me.

I am trying to let the user add chips to a table row item, and I want to give them the options of chips to choose from with autocomplete.

I've copy and pasted the autocomplete code example and it works outside of the table, but it doesn't work in the table. Any ideas why it wouldn't work in the actual table? Do you know what I would need to change to have the autocomplete work in a table cell?

Here is my code for the autcomplete within a table cell:

<td>    
<div class="md-form" style="width:200px;height:200px;">
           <input type="search" id="form-autocomplete" class="form-control mdb-autocomplete">
                   <button class="mdb-autocomplete-clear">
                                <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24"         xmlns="https://www.w3.org/2000/svg">
                                            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                                            <path d="M0 0h24v24H0z" fill="none" />
                                            </svg>
                                        </button>
                  <label for="form-autocomplete" class="active">What is your favorite US state?</label>
             </div>
</td>

`var states = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illnois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Carolina",
"North Dakota",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
];

$('#form-autocomplete').mdb_autocomplete({
data: states
});`

Marta Wierzbicka staff answered 3 years ago



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.6.1
  • Device: mac
  • Browser: chrome
  • OS: os
  • Provided sample code: No
  • Provided link: No