bootstrap类型头，自动完成 [英] bootstrap type head , auto complete

问题描述

大家好，

i我正在尝试使用bootstrap开发自动完成

这是我的代码：



[查看]



@model Medica.ViewModel.CompanyOrderItemModel



< script src =〜/ Scripts / typehead.js>< / script>



@ {

//ViewBag.Title = Medica.Resources.Resources .AddOrderItem;

ViewBag.Header = Medica.Resources.Resources.AddOrderItem;

布局= null;

}



< div class =modal-header>

< button type =buttonclass =closedata-dismiss =modal aria-hidden =true>& times;< / button>

< h4 class =modal-titleid =myModalLabel> @ Medica.Resources.Resources。 AddItem< / h4>

< / div>



@using（Html.BeginForm（））

{

@ Html.AntiForgeryToken（）

@ Html.ValidationSummary（true）



< div CL ass =modal-body>

@ Html.HiddenFor（model => model.Item.CompanyOrderID）

< div class =editor-label>

@ Medica.Resources.Resources.Item

< / div>

< div class =editor-field>

@ Html.HiddenFor（model => model.Id）

< input type =textname =namesvalue =id =typeaheaddata-provide =typeahead/>

@ Html.ValidationMessageFor（model => model.Item.ItemID）

< / div>



< div class =editor-label>

@ Medica.Resources.Resources.RequiredQuantity

< / div>

< div class =editor-field>

@ Html.EditorFor（model => model.Item.OrderItemRequiredQuantity）

@ Html.ValidationMessageFor（model => model.Item.OrderItemRequiredQuantity）



< / div>

< / div>

}



< div class =modal-footer>

< button class =btndata-dismiss = modal>取消< / button>

< input class =btn btn-primarytype =submitvalue =@ Medica.Resources.Resources.Add/>

< / div>



@section脚本{

@ Scripts.Render（〜/ bundles / jqueryval）

}



< script type =text / javascript>

$（function（）{

$（'＃typeahead'）。typeahead（ {

来源：函数（术语，过程）{

var url ='@ Url.Action（GetNames，ItemApi）';



返回$ .getJSON（url，{term：term}，函数（数据）{

返回流程（数据）;

}）;

}

}）;

}）

< / script>





[控制器]

hello guys,
i am trying to develop autocomplete using bootstrap
that is my code:

[View]

@model Medica.ViewModel.CompanyOrderItemModel

<script src="~/Scripts/typehead.js"></script>

@{
//ViewBag.Title = Medica.Resources.Resources.AddOrderItem;
ViewBag.Header = Medica.Resources.Resources.AddOrderItem;
Layout = null;
}

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">@Medica.Resources.Resources.AddItem</h4>
</div>

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<div class="modal-body">
@Html.HiddenFor(model => model.Item.CompanyOrderID)
<div class="editor-label">
@Medica.Resources.Resources.Item
</div>
<div class="editor-field">
@Html.HiddenFor(model => model.Id)
<input type="text" name="names" value="" id="typeahead" data-provide="typeahead" />
@Html.ValidationMessageFor(model => model.Item.ItemID)
</div>

<div class="editor-label">
@Medica.Resources.Resources.RequiredQuantity
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Item.OrderItemRequiredQuantity)
@Html.ValidationMessageFor(model => model.Item.OrderItemRequiredQuantity)

</div>
</div>
}

<div class="modal-footer">
<button class="btn" data-dismiss="modal">Cancel</button>
<input class="btn btn-primary" type="submit" value="@Medica.Resources.Resources.Add" />
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

<script type="text/javascript">
$(function () {
$('#typeahead').typeahead({
source: function (term, process) {
var url = '@Url.Action("GetNames", "ItemApi")';

return $.getJSON(url, { term: term }, function (data) {
return process(data);
});
}
});
})
</script>


[controller]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
//using System.Web.Http;
using Medica.BusinessLayer;
using Medica.Models;
using System.Web.Mvc;
 

namespace Medica.Controllers
{
    public class ItemApiController : Controller
    {
        MedicaEntities dbMedica = new MedicaEntities();
        

        [HttpGet]
        public JsonResult GetNames(string term)
        {
            var names = (from u in dbMedica.Items
                         where u.LatinName.Contains(term)
                         select u).ToArray();
            var results = names.Select(u => u.LatinName);

            return new JsonResult()
            {
                Data = results,
                JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };
        }
       
    }
}

问题是当我输入任何东西时函数getnames没有被解雇可以帮助我解决这个问题吗？

感谢高级。

the problem is when i type anything the function getnames doesn't fired can any one help my to solve this problem ?
thanks in advanced .

推荐答案

（function（）{

(function () {

（'＃typeahead'）。typeahead（{

source：function（term，process）{

var url ='@ Url.Action（GetNames，ItemApi）';



return

('#typeahead').typeahead({
source: function (term, process) {
var url = '@Url.Action("GetNames", "ItemApi")';

return

.getJSON（ url，{term：term}，function（data）{

return process（data）;

}）;

}

}）;

}）

< / script>





[控制器]

.getJSON(url, { term: term }, function (data) {
return process(data);
});
}
});
})
</script>


[controller]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
//using System.Web.Http;
using Medica.BusinessLayer;
using Medica.Models;
using System.Web.Mvc;
 

namespace Medica.Controllers
{
    public class ItemApiController : Controller
    {
        MedicaEntities dbMedica = new MedicaEntities();
        

        [HttpGet]
        public JsonResult GetNames(string term)
        {
            var names = (from u in dbMedica.Items
                         where u.LatinName.Contains(term)
                         select u).ToArray();
            var results = names.Select(u => u.LatinName);

            return new JsonResult()
            {
                Data = results,
                JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };
        }
       
    }
}

问题是当我输入任何东西时函数getnames没有被解雇可以帮助我解决这个问题吗？

感谢先进。

the problem is when i type anything the function getnames doesn't fired can any one help my to solve this problem ?
thanks in advanced .

这篇关于bootstrap类型头，自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！