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>