PHPackages luizfabianonogueira/autocomplete - 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. [Search & Filtering](/categories/search) 4. / 5. luizfabianonogueira/autocomplete ActiveLibrary[Search & Filtering](/categories/search) luizfabianonogueira/autocomplete ================================ Ferramenta de bsuca com base no preenchimento em tempo real V0.1.4(1y ago)05LGPL-3.0-or-laterJavaScriptPHP >=8.1 Since Oct 25Pushed 1y ago1 watchersCompare [ Source](https://github.com/LuizFabianoNogueira/autocomplete)[ Packagist](https://packagist.org/packages/luizfabianonogueira/autocomplete)[ RSS](/packages/luizfabianonogueira-autocomplete/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (4)Dependencies (1)Versions (5)Used By (0) [![Laravel Logo](src/Assets/img/laravel.png)](src/Assets/img/laravel.png) Autocompete \[Select\] ====================== [](#autocompete-select) [![Latest Stable Version](https://camo.githubusercontent.com/6c9f5587bda834b8417c6ad1f9cac9cc36575605090c647b4428d1c5cfb94ac7/68747470733a2f2f706f7365722e707567782e6f72672f6c75697a66616269616e6f6e6f6775656972612f6175746f636f6d706c6574652f76)](//packagist.org/packages/luizfabianonogueira/autocomplete)[![Total Downloads](https://camo.githubusercontent.com/c40ed72131e73d4931fcd8e500bb5725ac46fff1120950727670cb2c330dca40/68747470733a2f2f706f7365722e707567782e6f72672f6c75697a66616269616e6f6e6f6775656972612f6175746f636f6d706c6574652f646f776e6c6f616473)](//packagist.org/packages/luizfabianonogueira/autocomplete)[![Latest Unstable Version](https://camo.githubusercontent.com/c24817d63b806ae7c19bb0546d9a2b395ffad3d1233de2d8e89469b3ee56aed6/68747470733a2f2f706f7365722e707567782e6f72672f6c75697a66616269616e6f6e6f6775656972612f6175746f636f6d706c6574652f762f756e737461626c65)](//packagist.org/packages/luizfabianonogueira/autocomplete)[![License](https://camo.githubusercontent.com/1bec14825b86ce5c78401af7cf5da66959d9af7dee5225f8036d8a34e7939e2f/68747470733a2f2f706f7365722e707567782e6f72672f6c75697a66616269616e6f6e6f6775656972612f6175746f636f6d706c6574652f6c6963656e7365)](//packagist.org/packages/luizfabianonogueira/autocomplete) [![Badge em Desenvolvimento](https://camo.githubusercontent.com/a226a1261dea445b7d6471781f9297775c38bc42f6a8b58b7367d80bf561fc7c/687474703a2f2f696d672e736869656c64732e696f2f7374617469632f76313f6c6162656c3d535441545553266d6573736167653d494e253230444556454c4f504d454e5426636f6c6f723d475245454e267374796c653d666f722d7468652d6261646765)](https://camo.githubusercontent.com/a226a1261dea445b7d6471781f9297775c38bc42f6a8b58b7367d80bf561fc7c/687474703a2f2f696d672e736869656c64732e696f2f7374617469632f76313f6c6162656c3d535441545553266d6573736167653d494e253230444556454c4f504d454e5426636f6c6f723d475245454e267374796c653d666f722d7468652d6261646765) Descrição --------- [](#descrição) Ferramenta de seleção (select) com buscar de dados em tempo real por preenchimento. Com essa gerrementa você pode buscar os dados aos poucos confome vai digitando no campo de busca. Isso agiliza a busca de dados em listas muito grandes. A busca é feita no banco de dados, então você pode buscar por qualquer campo da tabela podento ate mesmo utilizar dois ou mais campos de referencia. Instalação ---------- [](#instalação) Baixe o pacote via composer: ``` composer require luizfabianonogueira/autocomplete ``` Adicone o provider em bootstrap/providers.php: ``` 'providers' => [ ... LuizFabianoNogueira\Autocomplete\AutocompleteServiceProvider::class, ... ] ``` Utilização ---------- [](#utilização) Na sua model adicione o trait `AutocompleteTrait`: ``` use LuizFabianoNogueira\Autocomplete\AutocompleteTrait; class User extends Model { use AutocompleteTrait; ... } ``` Ainda em sua model devemos gerar uma varivel responsavel por indicar qual campo deve ser buscado. ``` protected $autocomplete_search_fields = ['name', 'email']; ``` Nesse campo você deve passar um array com os campos que deseja buscar. Observe que utilizamos mais de um campo de busca no exemplo acima. Você pode adicionar quantos campos desejar. No aquivo layout adicione o css e o js utilizando as rotas a baixo: ``` ``` Pronto com apenas isso você já pode utilizar o recurso de busca em tempo real no modo dinamico. Veja abaixa um exemplo de como utilizar o recurso: No local onde deseja adicionar um id de identificação. ``` ``` Para adicionar o recurso de busca em tempo real você deve adicionar o codigo de chamada do recurso. ``` let configuracao = {... ...}; $("#box-autocomplete-um").loadAutocompleteLaravel(configuracao); ``` Em `configuracao` você deve passar um objeto com as configurações do recurso. Em `#box-autocomplete-um` você deve passar o id do elemento que vai receber o recurso. Logo em seguida adicione o script de configuração do recurso ``` let configuracao = { autocomplete: { alias:'userDynamic', loadingData: '/assets/img/loading.gif', }, request: { dynamicModel: 'App\\Models\\User', take: 10, }, texts:{ placeholder: 'Pesquise aqui...', noResults: 'Nenhum resultado encontrado', label: 'Usuário', } }; $(document).ready(function(){ $("#box-autocomplete-um").loadAutocompleteLaravel(configuracao); }); ``` [![basic1.png](src%2FAssets%2Fimg%2Fbasic1.png)](src%2FAssets%2Fimg%2Fbasic1.png) Agora vamos ver todos os detalhes de como configurar o recurso e ver todo seu potencial. No exemplo acima podemos ver uma chamada de jquery que monta o compnente ``` let configuracao = {... ...}; $("#box-autocomplete-um").loadAutocompleteLaravel(configuracao); ``` Para isso devemos identificar como seletor quem vai receber o componente "#box-autocomplete-um" no exemplo que é o id de uma div. Não precisa criar inputs pois o componente ja faz isso para você. Para que o componente funcione corretamente você deve passar um objeto de configuração. Vamos ver o que cada parametro faz. ``` let configuracao = { autocomplete: { alias:'userDynamic', loadingData: '/assets/img/loading.gif', valueId: '', valueText: '', label:{ hidden: true, }, dataSource:{ fieldName: 'name', fieldValue: 'id' } }, }; ``` -**autocomplete:** é o objeto que contem as configurações do componente. - **alias:** *obrigatório* - é o nome do componente que você esta criando, deve ser unico para cada componente. - **loadingData:** *opcional* é a imagem que vai aparecer enquanto o componente esta carregando os dados. vc pode indicar uma url interna ou externa de um gif. - **valueId:** *opcional* é o valor a ser carregado ao inicializar. - **valueText:** *opcional* é o texto a ser carregado ao inicializar. - **label:** *opcional* é o objeto que contem as configurações do label. - **hidden:** *opcional* é um booleano que indica se o label deve ser oculto ou não. - **dataSource:** *opcional* é o objeto que contem as configurações dos campos de dados. - **fieldName:** *opcional* é o nome do campo no banco de dados que vai resultar a lista na. - **fieldValue:** *opcional* é o nome do campo no banco que vai ser retornado como valor de ID. ``` { request: { dynamicModel: 'App\\Models\\User', take: 10, }, } ``` - **request:** é o objeto que contem as configurações de busca dos dados. - **dynamicModel:** é o nome do model que você deseja buscar os dados. (Não esqueça de adicionar o trait `AutocompleteTrait` no model). por padrão a busca é feita no campo `name` e `id` do model, mas você pode alterar isso como nos exeplos abaixo. - **take:** *opcional* é a quantidade de dados que você deseja buscar por vez. por padrão é 10. Outra forma de fazer a busca é ou url aonde devemos fazer a rora e o metodo do controller. ``` { request: { url: '/search/user' ou '{{ route('search.user') }}', method: 'POST', take: 10, headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }, }, } ``` Quando utilizamos a busca por url o componente pode receber novas configurações; - **method:** *opcional* é o metodo http que deve ser utilizado na busca, por padrão é GET. - **headers:** *opcional* é o objeto que contem os cabeçalhos que devem ser enviados na requisição. Nesse campo vc pode passar todos os cabeçalhos que desejar, como token de autenticação, token csrf, etc. - **params:** *opcional* é o objeto que contem os parametros que devem ser enviados na requisição. Para que a busca funcione com os parametros você deve criar um scope no model que vai receber os parametros. ### Lista com imagem [](#lista-com-imagem) Para adicionar uma imagem a lista de resultados você deve adicionar a configuração abaixo. ``` let configuracao = { autocomplete: { alias:'userDynamic', loadingData: '/assets/img/loading.gif', valueId: '', valueText: '', label:{ hidden: true, }, dataSource:{ fieldName: 'name', fieldValue: 'id' }, image:{ show: true, width: 36, height: 36, field: 'image' } }, }; ``` - **image:** *opcional* é o objeto que contem as configurações da imagem. - **show:** *opcional* é um booleano que indica se a imagem deve ser exibida ou não. - **width:** *opcional* é a largura da imagem. - **height:** *opcional* é a altura da imagem. - **field:** *opcional* é o nome do campo no banco de dados que contem o caminho da imagem. default é 'image'. [![img.png](src%2FAssets%2Fimg%2Fimg.png)](src%2FAssets%2Fimg%2Fimg.png) Para que a busca funcione você deve criar um controller com o metodo de busca e retornar um json com os dados. ``` public function autocompleteUsers(Request $request): JsonResponse { return response()->json(Users::autocomplete()->get()); } ``` Perceba que a consulta da controler tem um metodo `autocomplete()` que é um scope que deve ser adicionado no model. A consulta é simples e limpa, você pode adicionar mais filtros e ordenações conforme sua necessidade. Agora vamos passar parametros em nossa consulta para que possamos filtrar os dados. ``` { request: { url: '/search/user' ou '{{ route('search.user') }}', method: 'POST', take: 10, headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }, params: { date_start: '2024-10-01 00:00:01', date_end: '2024-10-29 23:59:59' } }, } ``` ### Configurações de texto [](#configurações-de-texto) ``` { texts:{ placeholder: 'Pesquise aqui...', noResults: 'Nenhum resultado encontrado', label: 'Usuário', } } ``` - **texts:** é o objeto que contem as configurações de texto do componente. - **placeholder:** é o texto que vai aparecer no campo de busca. - **noResults:** é o texto que vai aparecer quando não houver resultados. - **label:** é o texto que vai aparecer no label do campo de busca. ### License: LGPL-3.0-or-later [](#license-lgpl-30-or-later) --- --- Contact & Support --------------------- [](#contact--support) [![LinkedIn](https://camo.githubusercontent.com/14bfd77712bb1778d3e44233232d09f4fc35598827336fb8f6530d211695e396/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c696e6b6564496e2d3030303f7374796c653d666f722d7468652d6261646765266c6f676f3d6c696e6b6564696e266c6f676f436f6c6f723d7768697465)](https://www.linkedin.com/in/luiz-fabiano-nogueira-b20875170/)[![WhatsApp](https://camo.githubusercontent.com/e68369b430afdfd9fdc000b0dee866f550911e62ec35a17a8b0efa15ca84a2d1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f57686174734170702d3030303f7374796c653d666f722d7468652d6261646765266c6f676f3d7768617473617070266c6f676f436f6c6f723d7768697465)](https://api.whatsapp.com/send?phone=5548991779088)[![GitHub](https://camo.githubusercontent.com/c23b9de6309febd679c6c06bdb31cd13be6bdb5845d749d459fc71b01b3cf57e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4769744875622d3030303f7374796c653d666f722d7468652d6261646765266c6f676f3d676974687562266c6f676f436f6c6f723d7768697465)](https://github.com/LuizFabianoNogueira)[![Packagist](https://camo.githubusercontent.com/ca5c937f8f8db574d438018218bcc069369d251b24cdb5110777230c70ba2ee6/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5061636b61676973742d3030303f7374796c653d666f722d7468652d6261646765266c6f676f3d7061636b6167697374266c6f676f436f6c6f723d7768697465)](https://packagist.org/packages/luizfabianonogueira/) 📞 **Phone:** +5548991779088 ✉️ **Email:** --- ### Support My Work [](#support-my-work) If you enjoyed this project and would like to support my work, any donation via Pix is greatly appreciated! Feel free to donate using one of the following Pix keys: 💳 **Email Pix Key:** `luizfabianonogueira@gmail.com` 📱 **Phone Pix Key:** `48991779088` Thank you for your support! ### Health Score 26 — LowBetter than 43% of packages Maintenance38 Infrequent updates — may be unmaintained Popularity4 Limited adoption so far Community4 Small or concentrated contributor base Maturity50 Maturing project, gaining track record 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 ~1 days Total 4 Last Release 560d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/3dad7d28d0352c0f0c1761814508ef21d6e8a6549211bc998c86108b5e4a8ce2?d=identicon)[LuizFabianoNogueira](/maintainers/LuizFabianoNogueira) --- Tags searchautocompleterealtimefomrluizfabianonogueira ### Embed Badge ![Health badge](/badges/luizfabianonogueira-autocomplete/health.svg) ``` [![Health](https://phpackages.com/badges/luizfabianonogueira-autocomplete/health.svg)](https://phpackages.com/packages/luizfabianonogueira-autocomplete) ``` ### Alternatives [romangrinev/laravel-opensearch-engine Custom Laravel Scout OpenSearch Engine 1319.8k](/packages/romangrinev-laravel-opensearch-engine)[omure/scout-advanced-meilisearch Laravel Scout extension that allows to use meilisearch advanced features as well as has an extended collection driver for testing purposes. 123.9k](/packages/omure-scout-advanced-meilisearch) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)