/ / jquery Autocomplete wirklich langsam auf ASP.net MVC 4 mobile - jquery, asp.net-mvc, jquery-mobile

jQuery Autocomplete wirklich langsam auf ASP.net MVC 4 mobile - jquery, asp.net-mvc, jquery-mobile

Ich habe eine Autovervollständigung in meiner MVC 4 Anwendungdas verbindet sich mit einer Datenbank aller Städte der Welt (so kann man sich vorstellen, dass es ziemlich groß ist). Es funktioniert gut auf dem PC, aber wenn ich auf meinem Smartphone auf die Website gehe, dauert es gut 3 Sekunden zu laden und Leistung wird sehr träge. Würde die Verwendung von Ajax oder JSON es schneller machen? Ich habe jetzt erst seit einem Monat in MVC und Web programmiert, also bitte nimm es mit mir auf. Hier ist der Code (ich benutze den Code aus den Plural-Tutorials):

Teil der Ansicht + Javascript

<!--Searching through all the hotel locations -->
<p>Hotel Location (City): @Html.TextBoxFor(x => x.booking_instance.Location,
new { data_autocomplete = @Url.Action("QuickSearch", "Booking") })</p>

<script type="text/javascript">
$(document).ready(function () {
$(":input[data-autocomplete]").each(function () {
$(this).autocomplete({ source: $(this).attr("data-autocomplete") });
});
});
</script>

Regler

// this is my database of cities.
TE_TSQL1_HBOSDataContext _db = new TE_TSQL1_HBOSDataContext();
public ActionResult QuickSearch(string term)
{
var cities = _db.Cities
.Where (r => r.CityName.Contains(term))
.Select(r => new { label = (r.CityName + ", " + r.CountryName) });
return Json(cities, JsonRequestBehavior.AllowGet);
}

Antworten:

1 für die Antwort № 1

Ja! Die Verwendung von Jquery und Ajax wird es auf Ihrem Handy definitiv schneller machen, da Sie nicht den gesamten Datensatz in den Speicher des Telefons laden und ihn dann durchsuchen müssen. Sie können den C # -Server die Auswahl vornehmen lassen und dann nur die gewünschten Daten zurückgeben. Der beste Teil ist, dass Ihr Server bereits JSON-Ergebnisse zurückgibt, und Sie können die erste Abfrage des Mobilgeräts veranlassen, nachdem 2 Zeichen eingegeben wurden, was die Größe des zurückgegebenen Datasets stark einschränkt.

        $( ":input[data-autocomplete]" ).autocomplete({
source: "controllerPath/QuickSearch",
minLength: 2

});