An example of using dynamic datalist

<input name="person_school" value="{$row[person_school]}" list="school_list" placeholder=" Please fill in your school name " />
<datalist id="school_list"></datalist>

<script> $('[name=person_school]').bind('input propertychange', function () {
       var keyword = $(this).val().replace(' ', '') $('#school_list').empty() if (keyword != '') {
       $.getJSON('/Home/School/get_search_result', {
       keyword: keyword }, function (res) {
       $.each(res.data, function (index, item) {
       if (res.data.length > 1 || keyword != item.school_name) {
       $('#school_list').append('<option value="' + item.school_name + '"/>') } }) }) } }) </script>