Does anyone have any tutorials on the proper way to generate an autocomplete plugin for October CMS? I've created them for non-CMS based sites based on the following tutorial: https://www.devbridge.com/sourcery/components/jquery-autocomplete/. What I am the most confused about is how to setup the ajax in a CMS style so that it plays nicely with the rest of OctoberCMS.

Right now I have a plugin called autocomplete with a component called autocomplete with the following methods inside:

public function onRun()
    {
        $info = $this->info();
        $this->page['results'] = $info;
    }

    public function info()
    {
        //Retrieve which table we are searching from
        $option = strtolower($this->param('option'));
        $term = $this->param('query');
        switch($option)
        {
            case 'hub':
                //Execute the query
                $results = Db::table("$table as t")
                ->where('t.name','LIKE',"%$term%")
                ->orWhere('t.state','LIKE',"%$term%")
                ->orWhere('t.iata','LIKE',"%$term%")
                ->select('t.name,t.state,t.iata,t.id');
                break;
        }

        //JSON encode the results
        $finalresults = json_encode($results);

        return $finalresults;
    }

The next step seems to be that I need to define a url for this to exist in. A logical choice for me seems to be located at /autocomplete/:option/:query. To make this page do I create a page in the CMS in a similar fashion as I do for any other page (e.g. backend->cms->create page)? Or is there a more appropriate page to create these backend pages? Additionally, is there anyway I can limit access to the server with something such as CSRF tokens? If so how can I set this up in OctoberCMS?

The following step would be to hook it up to a form input field. Let's assume that I have the following field:

    <div class="form-group">
        <label for="registerHub">Hub</label>
        <input name="name" type="text" class="form-control" id="registerHub" placeholder="Enter your home airport">
    </div>

How can I hook the ajax up to this to fill in the content?

Last updated 8 years ago

Hi. Do you found a solution?

Last updated 7 years ago

If some have this problem to, just use headers like this (example for select2)

ajax: { headers: { "x-october-request-flash":1, "x-october-request-handler":"onCategorySelect", "x-october-request-partials":"" }, url: '', ... }