Jquery 轻松自动完成样式

Question

我正在尝试使用 jquery easy-autocomplete 插件实现自动完成

npm install --save easy-autocomplete

我的样式有两个问题。

1. 结果显示在项目符号列表中。我需要它是一个简单的列表。我读过这个包包含主题，如何在 laravel 应用程序中应用主题？

2. 我在输入字段上添加了图标，当屏幕尺寸较小时，它会分成两行

        <div class="col-6 col-sm-3">
            <label for="filter[from]">{{__('text.from')}}</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i class="fa fa-map-marker-alt"></i></span>
                </div>
                <input type="text" name="filter[from]" class="form-control autocomplete" placeholder="{{__('text.from')}}" maxlength="255">
            </div>
        </div>

我将如何使结果显示时不带项目符号并且带有标记的输入始终保持在一行中？。

Answer 1

对于您刚刚错过的从库中导入 css 的 li 样式（“node_modules/yourlibrary 文件夹中的 css”）

或者只是添加一个cdn链接

<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" rel="stylesheet" />

为了响应性，你应该玩断点类，

<div class="row">
  <div class="col-lg-3 col-md-6 col-sm-12">
    ...
  <div>
  <div class="col-lg-3 col-md-6 col-sm-12">
    ...
  <div>
  ...
<div> 

这里设置为 3 列，大 6 为中，12 为小屏幕，您应该使用适合您定义的布局的内容

这是一个sn-p：

var options = {
  data: ["blue", "green", "pink", "red", "yellow", "gray"]
};

$(".autocomplete").easyAutocomplete(options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.themes.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-lg-3 col-md-6 col-sm-12">
    <label for="filter[from]">Text</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa fa-map-marker-alt"></i></span>
      </div>
      <input type="text" name="filter[from]" class="form-control autocomplete" placeholder="Text" maxlength="255">
    </div>
  </div>
  <div class="col-lg-3 col-md-6 col-sm-12">
    <label for="filter[from]">Text</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa fa-map-marker-alt"></i></span>
      </div>
      <input type="text" name="filter[from]" class="form-control autocomplete" placeholder="Text" maxlength="255">
    </div>
  </div>
</div>