Question

我想用mvc项目中的对象实现iquery ui autocomplete。我的结果如下：

[{"title":"result1","id":0,"Iscity":true},
{"title":"result2","id":1,"Iscity":false}]

html：

<input name="Departure" id="Departure" class="input-text full-width ui-autocomplete-input" placeholder="شهر یا فرودگاه" autocomplete="off" type="text">

默认情况下，我使用此代码，目前正在进行此项工作：

 $('#Departure').autocomplete({
         source: '@Url.Action("GetCityAndAirport", "Flight")'
     });

现在如何使用此结果实现jquery ui自动完成？这可能吗？

控制器：

     public class FlightController : Controller
    {

        Models.DbModel.Entities1 db = new Models.DbModel.Entities1();
        Models.logiclay.ErrorLog errorlog = new ErrorLog();
        AdakFlightRefrence.AdakFlight flightService = new AdakFlightRefrence.AdakFlight();
        OnlineFlightSearch GetAvailible = new OnlineFlightSearch();
        // GET: Flight
        public ActionResult Index()
        {
            return View();
        }


        [HttpPost]
        public ActionResult  HomeSearch(OnlineFlightSearch OFS)
        {

            if (OFS.IsMiladi == false && OFS.DepartureDatePersian != null)
            {
                string date = OFS.DepartureDatePersian.ToString("yyyy/MM/dd");
                OFS.DepartureDatePersian = (DateTime)PersianDateControls.Convertor.ToGregorianDate(date);
            }
            else if (OFS.IsMiladi == false && OFS.ArrivalDatePersian != null)
            {
                string date = OFS.ArrivalDatePersian.ToString("yyyy/MM/dd");
                OFS.ArrivalDatePersian = (DateTime)PersianDateControls.Convertor.ToGregorianDate(date);
            }

            AdakFlightRefrence.vmAirAvailRQ Adak_AirAvailRQ = new AdakFlightRefrence.vmAirAvailRQ();
            try
            {

                var result = flightService.Adak_AirAvailRQ(GetAvailible.GetAvailibleRQ(OFS), "Adak", "rLyVhr9w@j#A39Ac");

            }
            catch (Exception)
            {


            }
            return View();
        }




//------------------------------------------------GetCity and Airport------------------------------------------------------



        public JsonResult GetCityAndAirport(string term)
        {
            TravelEnterProject.Models.logiclay.FlightJsonResult.AutoComlateFlightJsonResult myresultCity = new Models.logiclay.FlightJsonResult.AutoComlateFlightJsonResult();
            TravelEnterProject.Models.logiclay.FlightJsonResult.AutoComlateFlightJsonResult myresultAirtport = new Models.logiclay.FlightJsonResult.AutoComlateFlightJsonResult();

            List<AutoComlateFlightJsonResult> c_a = new List<AutoComlateFlightJsonResult>();

            try
            {


                  var citylist2 = db.Fun_SearchCity(term).ToList();

                  var citylist3 = db.Fun_SearchAirport(term).ToList();



                   foreach (var item in citylist2)
                   {
                       myresultCity.title = (item.NameFA + "(شهر)");
                       myresultCity.Iscity = true;
                       myresultCity.id = item.Id;
                       c_a.Add(myresultCity);
                    }


                 foreach (var item in citylist3)
                   {

                       myresultAirtport.title = (item.NameFa + item.IATACode + "(فرودگاه)");
                       myresultAirtport.Iscity = false;
                       myresultAirtport.id = item.Id;
                       c_a.Add(myresultAirtport);
                   }
                   }
            catch (Exception e)
            {
                errorlog.Error("getcityandairport", "74", e.Source.ToString(), e.Message);
             }
            return Json(c_a, JsonRequestBehavior.AllowGet);
        }

    }

结果类：

 public class AutoComleteFlightJsonResult
{

    public string title { get; set; }
    public int id { get; set; }
    public bool Iscity { get; set; }


}

Answer 1

您可以在源中发送一个函数，您可以在其中获取值，并使用map函数以您需要的格式获取它：

$('#Departure').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: '@Url.Action("GetCityAndAirport", "Flight")',
            dataType: "json",
            data: {term: request.term}, //passing user input
            success: function (data) {
                response($.map(data, function (v, i) { //here you map your object
                    if (v.Iscity) { //here you can do something with your Iscity field
                        return {
                            label: v.title,
                            value: v.id
                        };
                    }
                }));
            }
        });
    }
});

如何使用对象实现iquery ui autocomplete？

1 个答案: