单击选项时输入 javascript 显示一些数据 php laravel

问题描述

我正在使用 laravel 开发产品。要下订单，用户键入产品名称。从数据库中显示建议。例如。如果用户想搜索铅笔。当他们开始写“pe”时，系统会显示数据库中的相关选项，例如钢笔、铅笔等我正在为此使用预先输入。

问题就在这里。我想做两件事：

当用户单击选项（例如铅笔）时，会打开一个模式并显示有关产品的一些数据（例如钢笔的颜色、钢笔的大小等）。用户最终将能够选择产品的变体。
当用户开始输入产品名称（例如 pe）并且他们没有找到他们想要的东西时，“添加新的”选项就会显示在那里！我附上了一个例子。请看下面的图片。当我输入 Rober 时，系统会显示与我的搜索相关的所有名称。它显示为红色。如果我的搜索查询不满足，系统还提供添加新查询的选项。显示为黄色。

我的代码如下：

html
<head>
    <title>New Order</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
</head>
<body>
<div class="container">
    <h3>New Order</h3>
    <label>Select Customer:</label>
    <input class="typeaheadCustomer form-control" type="text">

    <label>Select Product:</label>
    <input class="typeaheadProduct form-control" type="text">

</div>

<script type="text/javascript">
    var pathProduct = "{{ route('autocomplete-product') }}";
    $('input.typeaheadProduct').typeahead({
        source:  function (query,process) {
            return $.get(pathProduct,{ query: query },function (data) {
                return process(data);
                //Add new item
                //Then how to deal with products and their variations?!!
            });
        }
    });

    var pathCustomer = "{{ route('autocomplete-customer') }}";
    $('input.typeaheadCustomer').typeahead({
        source:  function (query,process) {
            return $.get(pathCustomer,function (customer) {
                 process(customer);
            });
        }
    });
</script>

Controller
    public function autocomplete_product(Request $request)
    {
        $data = \App\product::select("name")
            ->where("name","LIKE","%{$request->input('query')}%")
            ->get();
        return response()->json($data);
    }

    public function autocomplete_customer(Request $request)
    {
        $customer = \App\User::select("name")
            ->where('type_id',3)->where("name","%{$request->input('query')}%")
            ->get();
        return response()->json($customer);
    }

如果有人可以帮助我：

点击该选项后，产品的变体就会显示出来；
添加新选项

我将非常感激。

谢谢。

web.PHP file

Route::get('autocomplete-product','Order@autocomplete_product')->name('autocomplete-product');
Route::get('autocomplete-customer','Order@autocomplete_customer')->name('autocomplete-customer');

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-typeahead javascript laravel laravel typeahead.js