【问题标题】:Search option in product dropdown in LaravelLaravel 产品下拉列表中的搜索选项
【发布时间】:2020-11-23 17:24:53
【问题描述】:

我已经使用选择选项成功完成了产品下拉列表,但我无法在下拉列表中包含搜索选项。我尝试了一些从 Google 获取的代码,但失败了。我是 Laravel 的新手,我不知道如何继续。请帮忙添加搜索选项。

这是代码!

刀片:

<div class="row">
   <div class="input-field col s12 m6">
     {{ Form::select('customer', $customers, null, ['placeholder' => 'Select A Client ID' ,'required'=> '', 'aria-required' => 'true']) }}
   </div>
   <div class="input-field col s12 m6">
    {{ Form::select('products[]', $products, null, ['multiple' => true, 'class' => 'validate multiple', 'required'=> '', 'aria-required' => 'true']) }}
   </div>
</div>

控制器:

public function add()
    {
        $title = "Add New Order";
        $customer_list = DB::table('accounts')->select('id', 'fname', 'lname')->where('account_type_id', '1')->get();
        $product_list = DB::table('products')->select('id', 'name', 'quantity')->where('status', 1)->where('show_client', 1)->where('quantity', '>', 0)->get();

        $customers = array();
        foreach ($customer_list as $customer) {
            $customers[$customer->id] = $customer->id;
        }

        $productss = array();
        foreach ($product_list as $product) {
            $productss[$product->id] = $product->name . " (" . $product->quantity . ")";
        }

        $pselect = array('value="" disabled selected' => 'Please Select Products');
        $products = $pselect + $productss;


        return view('order.add', compact('title', 'customers', 'products'));
    }

路线:

// Orders Controller
Route::get('/order', 'OrderController@manage');
Route::get('/order/add', 'OrderController@add');
Route::post('/order/add_confirm', 'OrderController@addConfirm');
Route::post('/order/add_confirmed', 'OrderController@addConfirmed');
Route::get('/order/manage/{id}', 'OrderController@manageOrder');
Route::post('/order/manage/accept', 'OrderController@manageOrderStatus');
Route::post('/order/manage/pending', 'OrderController@manageOrderStatus');
Route::post('/order/manage/cancel', 'OrderController@manageOrderStatus');
Route::post('/order/manage/fraud', 'OrderController@manageOrderStatus');
Route::post('/order/manage/delete', 'OrderController@manageOrderStatus');
Route::post('/order/save_note', 'OrderController@manageOrderNote');
Route::post('/order/emi_calculation', 'OrderController@emiCalculation');
Route::get('/order/{name}', 'OrderController@manage');

【问题讨论】:

  • HTML 选择元素不可搜索。您正在寻找的是 HTML 数据列表。
  • 我不明白。请说清楚

标签: php laravel


【解决方案1】:

我建议使用已经存在的东西,Select2 是我用了很长时间的一个包,它真的很好

这是他们页面的链接:https://select2.org

你所要做的就是包含 CSS 和 JS

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

那么你的html应该是这样的:

<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

和你的 JS:

// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

【讨论】:

    【解决方案2】:

    一般来说,避免使用表单助手,即。 {{ Form:: ... 因为它们使代码过于复杂和冗长,没有任何真正的优势。使用普通的简单 html 表单标签。 要搜索客户,请尝试使用 DATALIST HTML 元素而不是选择。见这里:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist 用默认值填充数据列表,例如。选择一个客户,使用它的 value 属性,如下所示。 以下应该可以工作。

    web.php

    Route::get('/order/add', 'OrderController@add'); //testing
    

    OrderController.php 。请注意,我刚刚稍微更改了您对产品和客户的初始查询(我的客户表称为合作伙伴)以匹配我的数据库表和列,但逻辑仍然完好无损。

     <?php
    
    namespace App\Http\Controllers;
    use Illuminate\Http\Request;
    use Illuminate\Support\Facades\DB;
    
    class OrderController extends Controller
    {
        //
        public function add()
        {
            $title = "Add New Order";
           // $customers = DB::table('accounts')->select('id', 'fname', 'lname')->where('account_type_id', '1')->get();
            $customers = DB::table('partners')/*->select('id', 'fname', 'lname')->where('account_type_id', '1')*/->get();
    
            //$products = DB::table('products')->select('id', 'name', 'quantity')->where('status', 1)->where('show_client', 1)->where('quantity', '>', 0)->get();
            $products = DB::table('products')/*->select('id', 'name', 'quantity')->where('status', 1)->where('show_client', 1)->where('quantity', '>', 0)*/->get();
    
            return view('order.add', compact('title', 'customers', 'products'));
        }
    }
    

    views/add.blade.php 如下。

    <!doctype html>
    <html lang="en">
    
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
            integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    
        <title>Hello, world!</title>
    </head>
    
    <body>
        <h1>Hello, world!</h1>
    
    
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="input-field col s12 m6">
                        <input class="customers" list="customers" name="customer" value="Select A Customer" required>
                        <datalist id="customers">
                            @foreach($customers as $customer)
                            <option value="{{$customer->name}}" data-lname="{{$customer->name}}"
                                data-fname="{{$customer->name}}">
                            </option>
                            @endforeach
                        </datalist>
                    </div>
                </div>
                <div class="col-md-6">
    
    
                    <div class="input-field col s12 m6">
                        <label for="products">Add the new Products</label>
                        <select multiple class="form-control" id="products" name="products[]" required>
                            <option selected disabled value="Please select Products">Please select Products</option>
                            @foreach($products as $product)
                            <option value="{{$product->name .'('. $product->quantity .')'}}"
                                data-quantity="{{$product->quantity}}">{{$product->name .'('. $product->quantity .')'}}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
    
        </div>
    
    
        <!-- Optional JavaScript; choose one of the two! -->
    
        <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
        </script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous">
        </script>
    
        <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
        -->
    </body>
    
    </html>
    

    结果:

    【讨论】:

    • 替换代码后得到404错误信息。
    • 显示你的 routes/web.php 文件。 404可能是路由问题
    • @AhamedAmeen 有用吗?如果你需要,我可以和你一起逐步尝试。
    • 它不工作!请查看上面的routes/web.php
    • @AhamedAmeen,请检查我编辑的答案。如果可行,请记住将我的答案标记为正确。谢谢。如果您需要澄清,请告诉我。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多