简体   繁体   中英

Laravel ajax autocomplete very slow

I have the following jquery autocomplete feature in my application ( https://github.com/devbridge/jQuery-Autocomplete )

However it's very slow - it takes almost 4 seconds to render. I have debugbar installed and the timeline shows the booting taking up almost 3s, application takes 1s and the actual database query is 44ms.

This is my jquery autocomplete implementation:

window.locationAutoCompleteSettings = {
    serviceUrl: "/location-lookup",
    minChars: 2,
    paramName: "term",
    showNoSuggestionNotice: false,
    onSearchStart: function (query) {
        $(this).closest(".js-clear-input").find(".js-clear-input-trigger").addClass("clear-input-spinner")
    },
    onSearchComplete: function (query) {
        $(this).closest(".js-clear-input").find(".js-clear-input-trigger").removeClass("clear-input-spinner")
    },
    transformResult: function (response) {
        var data = JSON.parse(response);
        return {
            suggestions: $.map(data, function (item) {
                return {
                    value: item.name,
                    data: item.id
                }
            })
        };
    },
    onSelect: function (suggestion) {
        var e = $(this).closest(".js-lookup-container").find(".js-location-id");
        e.val(suggestion.data);
        var f = suggestion.value, b = $(".js-location-description");
        if (b.length && b.val() == "") {
            b.val(f).trigger("change")
        }

    }
};

$(".js-location-lookup").autocomplete(window.locationAutoCompleteSettings);

This is my controller method:

public function locationLookup(Request $request)
{
    $term = $request->input('term');

    $locations = $this->locationRepository->getByName($term)->get();

    return response()->json($locations);
}

For the record I'm running this on Homestead with php 7.4 on a windows 10 machine

Any ideas how I can tune this up because as it stands it's not very useable?

A small improvement can be done by limiting the records and limiting the data that you are fetching as below -

public function locationLookup(Request $request)
{
    $term = $request->input('term');

    $locations = $this->locationRepository->getByName($term)->take(10)->get(['id', 'name']);

    return response()->json($locations);
}
  • Here assuming that you are prepopulating only 10 records for autosuggest at once
  • And you need only id & name field for prepopulating

It's a little hack to fetch the less amount of data, I hope it will improve some performance.

So I've installed https://github.com/winnfsd/vagrant-winnfsd

$ vagrant plugin install vagrant-winnfsd

Updated the Homestead.yaml as follows:

folders:
- map: ~/code/project1
  to: /home/vagrant/project1
  type: "nfs"

Run

vagrant up --provision

Now booting has been brought down to 500ms

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM