Jquery easy-autocomplete styling

Question

I'm trying to implement autocomplete with jquery easy-autocomplete plugin

npm install --save easy-autocomplete

I have two problems with its styling.

1. Results are displayed in bulleted list. I need it to be a simple list. I've read this package includes themes, how do I apply the theme in laravel application?

2. I have prepend icon on input field, when screen size is smaller it breaks into two rows

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

How would I make it so that results are displayed without bullets and input with marker would always stay in one row?.

Answer 1

For the li styling you just missed to import the css from you library ("css in node_modules/yourlibrary folder ")

or just add a cdn link

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

and for responsiveness , you should play on break point class ,

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

here it was set as 3 column for large 6 for medium an 12 for small screen , you should use what is proper to your defined layout

Here is a snippet :

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>