PHPackages                             seblhaire/autocompleter - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. seblhaire/autocompleter

ActiveLibrary

seblhaire/autocompleter
=======================

A Laravel library with Javascript JQuery script to add input with auto-completer

1.6.0(1mo ago)1441MITPHPPHP >=8.4

Since Aug 14Pushed 1mo ago1 watchersCompare

[ Source](https://github.com/seblhaire/autocompleter)[ Packagist](https://packagist.org/packages/seblhaire/autocompleter)[ Docs](https://github.com/seblhaire/autocompleter)[ RSS](/packages/seblhaire-autocompleter/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (4)Versions (17)Used By (1)

Autocompleter
=============

[](#autocompleter)

[By Sébastien L'haire](http://sebastien.lhaire.org)

A Laravel library with Javascript JQuery script to add input with auto-completer to a form.

It uses:

- a Javascript auto-complete script based on [jQuery](https://jquery.com/) Javascript framework.
- [Bootstrap](https://getbootstrap.com/) 4 / 5 CSS Framework.

[![Autocompleter](autocompleter1.png)](autocompleter1.png)

[![Autocompleter with result list](autocompleter2.png)](autocompleter2.png)

Demo site available [here](https://sebastien.lhaire.org/autocompleter).

Installation
------------

[](#installation)

1. `composer require seblhaire/autocompleter`
2. Composer will automatically link the package with Laravel. But you still can explicitely add provider and facade to your `config/app.php`:

```
  'providers' => [
    ...
      Seblhaire\Autocompleter\AutocompleterServiceProvider::class,
      ...
    ],
    'aliases' => [
        ...
        "AutocompleterHelper" => Seblhaire\Autocompleter\AutocompleterHelper::class
      ]
```

3. Publish package (optionally).

```
$ php artisan vendor:publish
```

4. For Javascript and stylesheets, see next section.

Javascript ans stylesheets
--------------------------

[](#javascript-ans-stylesheets)

On a webpage, every JS library and CSS stylesheets can be linked separately. If you choose this classical way, first dowload and install above mentionned libraries. Then publish package files as explained above and put following tags in your template:

```

```

But websites often use many libraries and stylesheets and browser must download many files before the site can be rendered properly. Modern websites come with a single compressed Javascript file which concatenates necessary scripts; same principle for stylesheets. With Laravel you can use [Laravel Mix](https://github.com/JeffreyWay/laravel-mix) to compile files.

Use [NPM](https://www.npmjs.com/) package manager : `npm install bootstrap jquery`

Then your js source file should be something like this:

```
global.jQuery = require('jquery');
var $ = global.jQuery;
var jQuery = global.JQuery;
window.$ = $;
window.jQuery = jQuery;
require('bootstrap');
require('../../vendor/seblhaire/autocompleter/resources/js/autocompleter.js');
```

For your stylesheet:

```
@import '~bootstrap/scss/bootstrap';

@import "../../vendor/seblhaire/autocompleter/resources/css/autocompleter";
```

Configuration file
------------------

[](#configuration-file)

Autocompleter library is customizable. Default values can be changed, either in configuration file, or by passing options in Facade function (see next section). If you want to modify default configuration file, publish package files and access to `config/autocompleter.php`.

Usage
-----

[](#usage)

Autocompleter package comes with a simple Facade.

### AutocompleterHelper::init

[](#autocompleterhelperinit)

Inits an autocompleter object that can be passed to the view.

`AutocompleterHelper::init($inputid, $labeltext, $url, $options)`where:

- `$inputid`: id of `` tag which gets the autocompleter.
- `$labeltext`: input label,
- `$url`: route that must be used to load data. Set empty if static data.
- `$options` : array of options.
    - `'labelclass'`; class of input label. Default none;
    - `'helpclass'`: help text class. Default: 'autocompletehelp';
    - `'helptext'`: help text below input. Text can be string or translation key. Cf [below](#translation_keys).,
    - `'divclass'`: main``class. Default: "form-group":
    - `'inputclass'` : class of auto-complete `` field. Default: 'form-control';
    - `'resultdivclass'`: classes of ``which contains results list. Default: 'sebautocomplete';
    - `'resultlistclass'`: class(es) of result list `` element. Default: 'list-group';
    - `'resultlistclassitem'` : class(es) of list item ``element. Defaut: 'list-group-item';
    - `'highliteclasses'` ; class for ``to highlite search term in list. Default: 'sebautoloadhighlite';
    - `'activeitem'` : class to highlite current selected `` element. Default: 'active';
    - `'id_field'`: name of field in result line containing data identifier or key. Default: 'id',
    - `'id_included'`: id field (cf previous line) must be added to result. Default: true;
    - `'list_field'` : name of field in result line containing text to display in list. Default: 'listfield';
    - `'encoding'`character encoding of data. Default `'utf8'`;
    - `'maxresults'`: max result number. Default: 6;
    - `'minsearchstr'`: minimum search string length to start autocompletion. Default: 1;
    - `'callback'` : name of function to be called after a value is selected.

To summarize, in your controller insert:

```
$ac = AutocompleterHelper::init(
   'autocompleter1',
   'Countries',
   route('autocompletesearch'), // route called when typing in input
   [
    'callback' => 'output'
 ]);
 ...
 return view('autocompleter', [
      ...
     'ac' => $ac,
     ...
 ]);

```

In your blade template, insert following at the place you want the autocompleter to appear:

`{!! $ac !!}` or `{!! $ac->output() !!}`

### Output methods

[](#output-methods)

#### output()

[](#output)

This method `output()` prints tags and outputs autocompleter initalisation script. It uses the above methods, that can be used to integrate autocompleter in other widgets, or to organize code as you wish.

#### printDiv()

[](#printdiv)

This method prints the main ``. It uses methods `printInsideDiv()` and `printHelp()`

#### printInsideDiv()

[](#printinsidediv)

Prints `` that contains label, form input and result list. That container is necessary to define a fixed width. It uses methods `printLabel()`, `printInput()` and `printResultDiv()`.

#### printHelp()

[](#printhelp)

Prints help text below input line.

#### printResultDiv()

[](#printresultdiv)

Prints results container which contains the proposal list.

#### printLabel()

[](#printlabel)

Prints autocompleter label.

#### printInput()

[](#printinput)

Prints autocompleter input field.

#### printJsInit()

[](#printjsinit)

Prints JavaScript code to init autocompleter.

### Utils::highlite($string, $search, $classes)

[](#utilshighlitestring-search-classes)

Takes a string, search a susbtring in it and highlites the corresponding chunk(s)

`Utils::highlite($string, $search, $classes) : string`

where:

- `$string` is the string to highlite;
- `$search` is the substring to search;
- `$classes` is/are the class(es) for the `` tag(s) that will be inserted in the highlighted string.

The function returns the highlighted string.

Search function
---------------

[](#search-function)

You must build a simple method in a controller that will be called to update result lists. Here are a few requirements:

1. your route has to accept the POST method;
2. two parameters only are built in the autocompleter object:
    - 'search' contains the current string in input;
    - 'maxresults' is an integer for the maximum of results acceptable for the autocompleter. We provide a request model AutocompleterRequest to perform form validation.
3. the method must return a json object with a single field named 'res' which contains an array of result lines.
4. result lines are an array which must contain at least the following fields:

- a field whose key corresponds to the config value `id_field` (cf. above) (`config('autocompleter.highliteclasses')`);
- a field whose key corresponds to the config value `list_field`, which contains the text for the autocompleter result list. If `id_included` has value `true` in config, the autocompleter object will add automatically the `id_field` value. In this field you can use the above mentioned function `Utils::highlite`. To summarize here is a complete example:

```
use Seblhaire\Autocompleter\AutocompleterRequest;
...
public function search(AutocompleterRequest $request){
  $search = $request->input('search');
  $countries = collect(Countries::getList())->filter(function($data) use ($search){ //search in country list
    return (mb_stripos($data['code'], $search) !== false) || (mb_stripos($data['country'], $search) !== false);
  })->take($request->input('maxresults'));
  $res = [];
  if (count($countries) > 0){
    foreach  ($countries as $country){
      $res[] = [
        config('autocompleter.id_field') => $country['code'],
        'country' => $country['country'], // other value available
        config('autocompleter.list_field') => Utils::highlite($country['code'] . ' : ' . $country['country'], $request->input('search'), config('autocompleter.highliteclasses'))
      ];
    }
  }
  return response()->json(['res'  => $res]);
}

```

Translation keys
----------------

[](#translation-keys)

Laravel loads config files very early in process. Therefore config files cannot contain `__('translation.key')`. In order to solve this issue, we made an helper either to print directly strings or to send translation key to translation helper. Translation keys can be delimited by character # . Ex: `"#autocompleter::messages.autocompleterhelp#"`. Original translations are stored under `vendor/seblhaire/autocompleter/resources/lang`. If you publish package files, you can find translations in `resources/lang/vendor/autocompleter/`.

Feel free to translate keys in your own language and either to send it to the author or to do a merge request on GitHub.

Questions? Contributions?
=========================

[](#questions-contributions)

Feel free to send feature requests or merge request to the author or simply to ask questions.

###  Health Score

50

—

FairBetter than 95% of packages

Maintenance92

Actively maintained with recent releases

Popularity9

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity76

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~121 days

Recently: every ~275 days

Total

15

Last Release

40d ago

PHP version history (3 changes)1.0PHP >=5.6

1.5.0PHP >=8.2

1.6.0PHP >=8.4

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/72663124?v=4)[Sébastien L'haire](/maintainers/seblhaire)[@seblhaire](https://github.com/seblhaire)

---

Top Contributors

[![seblhaire](https://avatars.githubusercontent.com/u/72663124?v=4)](https://github.com/seblhaire "seblhaire (20 commits)")

### Embed Badge

![Health badge](/badges/seblhaire-autocompleter/health.svg)

```
[![Health](https://phpackages.com/badges/seblhaire-autocompleter/health.svg)](https://phpackages.com/packages/seblhaire-autocompleter)
```

###  Alternatives

[tymon/jwt-auth

JSON Web Token Authentication for Laravel and Lumen

11.5k49.1M347](/packages/tymon-jwt-auth)[laravel/reverb

Laravel Reverb provides a real-time WebSocket communication backend for Laravel applications.

1.5k9.4M48](/packages/laravel-reverb)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[pressbooks/pressbooks

Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS.

44643.1k1](/packages/pressbooks-pressbooks)[aedart/athenaeum

Athenaeum is a mono repository; a collection of various PHP packages

255.2k](/packages/aedart-athenaeum)[surface/laravel-webfinger

A Laravel package to create an ActivityPub webfinger.

113.8k](/packages/surface-laravel-webfinger)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)