Как заставить Typeahead.js искать определенную БД (из нескольких) в Laravel 5.7 - PullRequest
Новая
       4

Как заставить Typeahead.js искать определенную БД (из нескольких) в Laravel 5.7

0 голосов
/ 01 ноября 2018

У меня есть две базы данных в моем приложении Laravel 5.7, и я хотел бы добавить функциональность typeahead с одной из них.

Это первый раз, когда я его использую, поэтому я не знаю, как это сделать.

Я следую инструкциям здесь: https://itsolutionstuff.com/post/laravel-57-autocomplete-search-from-database-using-typeahead-jsexample.html

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Я использовал typeahead в своем приложении. Надеюсь, это поможет вам. 

$(document).ready(function(){   
    $.ajax(
    {
        type : 'GET',
        url: base_url+"/getrelateduser",
        success: function (data)
        {
            // Defining the local dataset
            var relateduser = data;

            // Constructing the suggestion engine
            var relateduser = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                local: relateduser
            });
            $('.sendleads').typeahead({
                hint: true,
                highlight: true, /* Enable substring highlighting */
                minLength: 3, /* Specify minimum characters required for showing result */
            },
            {
                name: 'relateduser',
                source: relateduser
            });
        }
    });
});

Здесь URL "/ getrelateduser" будет возвращать все электронные письма пользователей в таблице пользователей. Дайте мне знать, если у вас есть еще вопросы.

0 голосов
/ 02 ноября 2018

Если вы не против использования Vue.js , вот решение для вас, которое, я думаю, достигает того, что вы надеетесь сделать с помощью Typeahead.js

Я предполагаю, что на вашем app/config/database.php установлены два подключения к базе данных. Давайте назовем второе connection2 .

Вы не упоминаете, как выглядит ваша Модель, но я предполагаю, что есть name или description или что-то подобное. Просто поменяйте это с тем, что вы на самом деле ищете.

Модель товара 

class Item extends Model
{
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'description',
        'price'
    ];

    protected $connection = 'connection2';
}

ItemsController.php 

public function searchItems(Request $request)
{
    $items = Item::where([
        ["description", "LIKE", "%{$request->input('query')}%"]
    ])
    ->groupBy('description')
    ->get();

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

public function fetchSingleItem($id)
{
    $item = Item::where([
        'id' => $id
    ])
    ->first();

    return $item;
}

Ваш SearchItems.vue компонент 

<template>
    <div>
        <input type="text" placeholder="Search items.." v-model="query" v-on:keyup="autoComplete" class="form-control">
        <div class="panel-footer" v-if="results.length">
            <table class="table table-light">
                <tr v-bind:key="result" v-for="result in results">
                    <td>{{ result.description }}</td>
                    <td><a v-bind:href="url+'/'+result.id"><button class="btn btn-outline-primary">Show Item</button></a></td>
                </tr>
            </table>
        </div>
    </div>
</template>


<script>

 export default{
  data(){
   return {
    query: '',
    url: '/items/show/',
    item: item,
    results: []
   }
  },
  methods: {
   autoComplete(){
    this.results = [];
    if(this.query.length > 2){
     axios.get('/items/search',{params: {query: this.query}}).then(response => {
      this.results = response.data;
     });
    }
   }
  }
 }
</script>

Зарегистрируйте ваш компонент в app.js 

Vue.component('search-items', require('./components/SearchItems.vue'));

Ваш web.php маршруты 

Route::get('/items/search', 'ItemsController@searchItems')->name('items.search');
Route::get('/items/show/{id}', 'ItemsController@fetchSingleItem')->name('items.show');

Затем просто вызовите ваш компонент Vue.js в любом блейде, который вы хотите

Поиск-items.blade.php 

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Search Items</div>
                <div class="card-body">
                    <search-items></search-items>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Что касается использования нескольких баз данных, здесь отличный ориентир.

...