DropDownList с текстовым полем Ввод в качестве критерия фильтра

Мне нужно иметь DropDownList или его эквивалент в ASP.NET MVC в представлении, которое заполнено связью записей из базы данных.DropDownList с текстовым полем Ввод в качестве критерия фильтра

При выборе DropDownList должен производить список как обычно, за исключением того, что пользователь может ввести в него текст, после чего элементы в DropDownList будут отфильтрованы на основе введенного текста.

Пользователь должен, тем не менее, выбрать только один из вариантов в списке.

Это может быть любой другой элемент управления, но предпочтительно НЕ сторонний предмет.

источник

2014-02-19 HowlinWulf

Я нашел достойный метод, который работает.

Единственная проблема заключается в том, что для этого требуется два отдельных элемента управления (DropDownList и TextBox), но кроме этого, работает красиво.

HTML код (декларация управления) является:

<table> 
    <tr> 
     <td> 
      <div> 
       <%: Html.Label("Search Filter:")%> 
      </div> 
     </td> 
     <td> 
      <div> 
       <%: Html.TextBox("textBoxForFilterInput")%> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div> 
       <%: Html.Label("The List")%> 
      </div> 
     </td> 
     <td> 
      <div> 
       <%: Html.DropDownList("listOfOptions")%> 
      </div> 
     </td> 
    </tr> 
</table>

Код JavaScript является:

$(function() { 
     var opts = $('#listOfOptions option').map(function() { 
      return [[this.value, $(this).text()]]; 
     }); 

     $('#textBoxForFilterInput').keyup(function() { 
      var rxp = new RegExp($('#textBoxForFilterInput').val(), 'i'); 
      var optlist = $('#listOfOptions').empty(); 
      opts.each(function() { 
       if (rxp.test(this[1])) { 
        optlist.append($('<option/>').attr('value', this[0]).text(this[1])); 
       } 
      }); 
     }); 
    });

Тогда просто заселить #listOfOptions, а затем вы должны быть хорошо идти.

В качестве альтернативы вы можете подключить его к предопределенному списку/массиву или получить его из базы данных, как я.

Это работает как шарм, очень простой и супер быстрый.

Благодаря DMI для отправки по электронной почте.

Его работы по этому вопросу можно найти here.

источник

2014-02-27 08:54:14 HowlinWulf

Это возможно, написав код jQuery. Но это уже доступны, и это является открытым исходным кодом, широко используется

Использование jQuery chosen и настройки как ниже

$(".select").chosen();

источник

2014-02-19 10:13:25

Я не могу заставить это работать.Я включил файл и метод .chosen даже всплывает с intellisense, но я продолжаю получать ошибку: объект не поддерживает это свойство или метод 'selected' – HowlinWulf

Для этого .autoComplete из Jquery может быть использован.

HTML, как

<table><tr><td><input type="textbox" id="textBoxid" /> <div id="targetDiv" style="z-index:10"></div>

Jquery код будет как

$(function() { 
     $("#textBoxid").autocomplete({ 
      appendTo: "#targetDiv", 
      position: { at: "bottom bottom" }, 
      source: function (request, response) { 
       $.ajax({ 
        url: '@Url.Action("ActionMethod", "Controller")', 
        type: "POST", 
        dataType: "json", 
        data: { searchString: request.term }, 
        success: function (data) { 
         response($.map(data, function (item) { 
          return { label: item.ColumnValue, Id:item.ColumnId } 
         })) 
        } 
       }) 
      }, 
      select: function (event, ui) { 
       if (ui.item) { 
// for saving the selected item id or any other function you wanna perform on selection 
        $('#hiddenfield').val($.trim(ui.item.Id)); 
       } 
      } 
     });

Действие Метод будет как

 [HttpPost] 
     public JsonResult MaterialDesc(string searchString) 
     {

// На SearchString основе вы можете иметь свой код для извлечения данных из базы данных. }

надеюсь, что это может помочь вам :)

источник

2014-02-19 10:35:55

DropDownList с текстовым полем Ввод в качестве критерия фильтра

ответ

Смежные вопросы