How to use Algolia autocomplete with bootstrap tag inputs or similar plugin

Question

How to use Algolia autocomplete with bootstrap tag inputs or similar plugin

485 views Asked by Kunal Rajput At 25 January 2022 at 11:34

the following is the working code of algolia autocomplete, please help me how I can use it with the bootstrap tag input plugin or any other similar jquery autocomplete, i tried same with jquery tagit plugin and still couldn't solve it

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Algolia| Autocomplete</title>
</head>

<body>
    <div class="container">
        
<div class="aa-input-container" id="aa-input-container">
    <input type="search" id="tags" class="tags" placeholder="Search with algolia..." name="search"
        autocomplete="off" />
</div>
</div>

    <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
    <script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>

    <script>

         (function() {
    let client = algoliasearch('algolia-app-id', 'algolia-app-key');
    let index = client.initIndex('tags');
    let enterPressed = false;
    //initialize autocomplete on search input (ID selector must match)
    autocomplete('#tags',
        { hint: false }, {
            source: autocomplete.sources.hits(index, { hitsPerPage: 10 }),
            //value to be displayed in input control after user's suggestion selection
            displayKey: 'name',
            //hash of templates used when rendering dataset
            templates: {
                //'suggestion' templating function used to render a single suggestion
                suggestion: function (suggestion) {
                    console.log(suggestion)
                    const markup = `

                        <div class="algolia-details">
                            <span>${suggestion.name}</span>
                        </div>
                    `;

                    return markup;
                },
                empty: function (result) {
                    return 'Sorry, we did not find any results for "' + result.query + '"';
                }
            }
        }).on('autocomplete:selected', function (event, suggestion, dataset) {
           console.log(suggestion);
        })
})();
    </script>
</body>
</html>

Original Q&A

There are 1 answers

**Kunal Rajput** · Answer 1 · 2022-01-26T10:38:29+00:00

Finally here I found a solution


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  <link rel="stylesheet" href="{{asset('css/algolia.css')}}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" integrity="sha512-xmGTNt20S0t62wHLmQec2DauG9T+owP9e6VU8GigI0anN7OXLip9i7IwEhelasml2osdxX71XcYm6BQunTQeQg==" crossorigin="anonymous" />
  <style type="text/css">
    .bootstrap-tagsinput{
      width: 100%;
    }
    .label-info{
      background-color: #17a2b8;

    }
    .label {
      display: inline-block;
      padding: .25em .4em;
      font-size: 75%;
      font-weight: 700;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      border-radius: .25rem;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,
      border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
  </style>
</head>
<body>
    <div class="container"> 

        <h2>Stacked form</h2>
        <br>
        <form action="test.php" id="form">

            <div class="form-group">
                <label for="name">Name  </label>
                <input type="text" name="name" id="name" class="form-control" data-role="tagsinput">    
            </div>
 


      <input type="submit" value="submit" class="btn btn-primary "> 

    </form>

  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js" integrity="sha512-VvWznBcyBJK71YKEKDMpZ0pCVxjNuKwApp4zLF3ul+CiflQi6aIJR+aZCP/qWsoFBA28avL5T5HA+RE+zrGQYg==" crossorigin="anonymous"></script>
  <script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
 
  <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
  
  <script>
    var client = algoliasearch('app-id', 'app-key');
    var index = client.initIndex('categories');

    $('#name').tagsinput({
      typeaheadjs: {
        name: 'citynames',
        displayKey: 'name',
        valueKey: 'name',
        minLength: 1,

        source:  index.ttAdapter({ "hitsPerPage": 10 }),
        templates: {
                //'suggestion' templating function used to render a single suggestion
                suggestion: function (suggestion) {
                  console.log(suggestion)
                  const markup = `

                  <div class="algolia-details">
                  <span>${suggestion.name}</span>
                  </div>
                  `;

                  return markup;
                } 
            }
        }
    });
</script>

</body>
</html>

TechQA.

How to use Algolia autocomplete with bootstrap tag inputs or similar plugin

There are 1 answers

Related Questions in JQUERY

Related Questions in ALGOLIA

Related Questions in BOOTSTRAP-TAGS-INPUT

Popular Questions

Popular Tags

Trending Questions