Implement searchable dropdown + date picker

I have created a bootstrap 3 program that can create dropdowns, input-boxes and text-fields from an admin-area. The options inside it are filled in by getting data from different tables in the database (mysql). The input data is automatically stored into the database on Submit. This works perfectly as it is. I now want to improve the functionality of all the dropdowns by allowing search inside each dropdown. In the example attached, there are only 4 or 5 categories. But if there are 1000, I want it to be possible to do a search between the categories (because showing 1000 options at once is to mutch). So it should be possible to start typing "A" inside the dropdown and then the dropdown-box should show everything starting with "A...". So almost more a filter than a search, but you get the idea. You can see how dropdowns are created by seeing the code search_dropdown_html. There can be 0, 1 or 10 dropdowns on the same page, so you must copy my current code and somehow implement jquer-search-inside-dropdown-box into that same code. The content of the dropdown-box is generated on page-load, so you can have all the search-options present/hidden already in html. You can also see how the current dropdown looks like. In addition, you should implement a jquery-datepicker for a text-box - it can also be 0, 1 or 10 textboxes on the same page. It should show a date like 22.02.2017 and when the jquery-datepicker-field is clicked, it should show a calendar to pick another date instead. Both dropdowns with search and date-picker-fields are created from an admin-page made in PHP/MySQL. So I can create as many of these fields as I want and they are shown to the user. You job is to make dropdown-items searchable in the GUI and to make the input-textfield to a datefield also in the GUI. No messy code please - code should also work on modern phones. You must work directly on our ftp-server. IMPORTANT regarding code-structure: See header_src and footer_src. I do NOT want a lot of additional files, as I have used a lot of time to only have relevant code and to keep the file-structure good (ie use the current folders for js, css-files). You must place all used components in logic/similar way as indicated by the header and footer js/css/html-code. If you use any others code or library, it must be under a license that allows redistribution the same way as the bootstrap-projects. You might place a line or two inside the common header/footer, but nothing more. This code-structure is really important. Failure to follow this might prohibit us from using your code and everything is useless. DO NOT use any big external library/projects without acceptance from me. I want the number of files few and code-friendly.