ASP.NET MVC «Редактируемый» ListBox

Question

Я использую платформу ASP.NET MVC. В моем контроллере я создаю ViewBag, который выбирает, то есть все имена из базы данных. У меня есть @ Html.listbox в моем представлении, и я использую функцию select2() ajax, которая используется для предложения, когда я набираю listbox. В примере, если я пишу «Ма», я перечислил Марию, Марио, Мартина, как было предложено, так как у меня есть их в базе данных. Моя проблема в том, что я могу просто выбирать между ними, а не добавлять новое имя, которое не находится в базе данных. Можете ли вы дать мне какие-либо идеи или примеры, как я мог бы это сделать? Я хотел бы использовать некоторые предложения, поскольку Google имеет, вы печатаете, получаете предложения, выбираете что-то, а затем можете изменить его и добавить в модель.

Вот мой код в представлении:

<div class="form-group"> 
    @Html.LabelFor(model => model.Names, htmlAttributes: new { @class = "control-label col-md-3" }) 
    <div class="col-md-6"> 
     @Html.ListBoxFor(model => Model.Names, null, new { @class = "form-control input-sm" }) 
     @Html.ValidationMessageFor(model => model.Names, "", new { @class = "text-danger" }) 
    </div> 
</div> 

<script type="text/javascript"> 

    $(function() { 

     $("#Names").select2({ 
      placeholder: "Filter names", 
      maximumSelectionSize: 1, 
     }); 

    }); 
</script> 

И я делаю это в моем ГЭТ в контроллере:

// GET: Names/Create 
public ActionResult Create() 
{ 
    ViewBag.Names= new SelectList(db.Names.Select(n => n.Names)); 
    return PartialView("_Create"); 
} 

EDIT:
Я использую JQuery автозаполнения в настоящее время, как это :

<script type="text/javascript"> 

    $(function() { 
     $("#tags").autocomplete(
      { 
       source: '@Url.Action("TagSearch", "Home")' 
      }); 
    }) 
</script> 

И я изменил мой Html.TextBox так:

<div class="form-group"> 
      <div class="col-md-6"> 
       <div class="ui-widget"> 
        @Html.TextBoxFor(model => Model.Names, null, new { @class = "form-control input-sm", @id = "tags" }) 
       </div> 
        @Html.ValidationMessageFor(model => Model.Names, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

Также у меня есть функция, которая возвращает JSON и она прекрасно работает, проблема теперь, когда я типа в предложениях являются позади моего частичного представления (между частичным видом и представлением Индекса) и в форме, которую я не могу выбрать ни одного из них (что-то вроде большой метки ...). Любая помощь по этому поводу?

Answer 1

В конце концов, я в конечном итоге меняю сценарий, как это:

<script type="text/javascript"> 

    $(function() { 
     $("#tags").autocomplete(
      { 
       source: '@Url.Action("TagSearch", "Home")', 

       open: function(){ 
        setTimeout(function() { 
         $('.ui-autocomplete').css('z-index', 99999999999999); 
        }, 0); 
       } 

      }); 
     return false; 
    }) 
</script> 

У меня была проблема с осью г, и это фиксированная моя проблема совершенно, после того, как с помощью автозаполнения, как Стивен предложил в комментарии.

Окончательные версии с моей точки зрения это:

<div class="form-group"> 
    <div class="col-md-6 ui-widget"> 
     @Html.EditorFor(model => Model.Names, new { @class = "form-control input-sm", @id = "tags" }) 
     @Html.ValidationMessageFor(model => Model.Names, "", new { @class = "text-danger" }) 
    </div> 
</div>