Question

我有一个输入列表，它正在我的数据中搜索。一切都很好，但我想使它像下面这样工作：

当我搜索Hello时，结果如下：

Examples: Hello there, Code with Hello, CodeWithHelloThere.

现在最后一个问题是我的问题，我希望我的代码以首字母而不是中间字母进行搜索，我正在做作业，所以我对此没有经验。

<div class="col-md-3">

     <div class="item form-group">
         <label class="control-label" for="name">معرفین<span class="required">*</span>
               </label>
               <select v-model="reagents" onchange="this.dispatchEvent(new Event('change'))" class="form-control reagent_selector"  name="reagents[]" multiple="multiple" id="">
                    @foreach ($reagents as $item)
                        <option value="{{$item->id}}">{{$item->name}}</option>
                     @endforeach
               </select>
   </div>
</div>

Laravel控制器：

public function p_show()
{
    $reagents=Reagent::all()->sortBy("name");
    return view('panel.report.p_report',compact(['reagents']));
}

输出是这样的：

Image output

更新1：我要弄清楚，我使用的是vue.js，它没有什么特别之处，没有任何计算机，手表或方法来进行搜索。我从控制器获取数据并将其放入reagents:'';中。并在顶部v模型中使用试剂，它是一个文本框，当您输入内容时，它将显示一个列表，该列表基于我输入和接收的数据字符。

更新2：完整代码

Full Codes for this file

Answer 1

Select2正在处理过滤。您可以设置我从official documentation借用并修改的功能，以实现您的目标。

$('.reagent_selector').select2({
    width: '100%',
    matcher: function(params, data) {
        if(params.term.trim() === '')
            return data;

        if(typeof data.text === 'undefined')
            return null;

        if(data.text.toLowerCase().match('\\b' + params.term.toLowerCase()))
            return data;

        return null;
    }
});

我更改了搜索功能，以仅与包含至少一个单词的选项相匹配（从输入文本开始）。

上方的\\b有一个用于匹配“单词边界”的正则表达式锚。在这种情况下，我强迫输入文本在单词的开头而不是中间。

如何在文本框中搜索首字母？

1 个答案: