Question

我的Laravel 5.7应用程序中有2个数据库，我想用其中一个添加预先输入功能。

这是我第一次使用它，所以我真的不知道该怎么做。

我正在按照这里的说明进行操作：https://itsolutionstuff.com/post/laravel-57-autocomplete-search-from-database-using-typeahead-jsexample.html

Answer 1

如果您不反对使用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组件

search-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

对于使用多个数据库，here is是一个很好的参考点。

Answer 2

我在应用程序中使用了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”将返回用户表中所有用户的电子邮件。如果您还有更多查询，请告诉我。

如何使Typeahead.js在Laravel 5.7中搜索特定的数据库（多个）

2 个答案: