CODEWITHSUNDEEP
javascripttypeahead.js
djoo
djoo

Reputation: 695

How to use typeahead?

I am trying to use twitter typeahead.js in my laravel app. It doesn't work (no error, but nothing appear under my field).

So I decided to to a simple html file with just the librairies and the examples (https://twitter.github.io/typeahead.js/examples/) to test. And this doesn't work either.

I'm going crazy :/ Is there something obvious I don't see ?

This is my code :

<html>

<head>

    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.min.css"
        integrity="sha256-CU0/rbxVB3Eixd3bbIuJxHJLDnXriJS9cwp/BfcgpLw=" crossorigin="anonymous" />
</head>

<body>

    <div id="bloodhound">
        <input class="typeahead" type="text" placeholder="States of USA">
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.min.js"
        integrity="sha256-W+Cxk9exgjON2p73M4RcoKvCpQUZ+IjXhEzZk6rlg9M=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/bloodhound.min.js"
        integrity="sha256-WJlyUMyJDhWTumC7/oaAtXFRBh0rZGc7qT80egxJafw=" crossorigin="anonymous"></script>

    <script>



        var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
            'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
            'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
            'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
            'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
            'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
            'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
            'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
            'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
        ];

        // constructs the suggestion engine
        var states = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.whitespace,
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            // `states` is an array of state names defined in "The Basics"
            local: states
        });

        $('#bloodhound .typeahead').typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        },
            {
                name: 'states',
                source: states
            });

    </script>
</body>

</html>

Link to test : https://jsfiddle.net/rxybp8de/2/

Upvotes: 0

Views: 1778

Answers (2)

dirkk0
dirkk0

Reputation: 2570

Since this is the first thing that comes up when you search 'typeahead', here is a vanilla solution:

https://codepen.io/dirkk0/pen/mdZjLNz?editors=1010

// via
// https://www.tgwilkins.co.uk/creating-a-basic-typeahead-in-vanilla-javascript.html

let recipes = [
  {
    name: "Spaghetti Bolognese",
    description: "A classic Italian pasta dish with a meat-based sauce."
  },
  {
    name: "Pizza Margherita",
    description:
      "A simple yet delicious pizza with tomato sauce, mozzarella, and basil."
  },
  {
    name: "Chicken Tikka Masala",
    description:
      "An Indian curry dish with marinated chicken and a creamy sauce."
  },
  {
    name: "Sushi",
    description: "Japanese cuisine featuring vinegared rice and seafood."
  },
  {
    name: "Tacos",
    description: "Mexican dish with tortillas filled with various ingredients."
  },
  {
    name: "Lasagna",
    description: "An Italian layered pasta dish with meat sauce and cheese."
  },
  {
    name: "Pad Thai",
    description: "A Thai stir-fried noodle dish with shrimp or chicken."
  },
  {
    name: "Beef Stroganoff",
    description: "A Russian dish with beef and mushrooms in a creamy sauce."
  },
  {
    name: "Falafel",
    description:
      "Middle Eastern deep-fried balls made from ground chickpeas or fava beans."
  },
  {
    name: "Ramen",
    description: "Japanese noodle soup with a flavorful broth and toppings."
  }
];

const typeahead = {
  selectedIndex: -1,
  init: function () {
    this.input = document.getElementById("typeahead");
    if (!this.input) return;
    this.resultHolder = document.getElementById("typeahead-results");
    this.input.addEventListener("input", this.handleInput.bind(this));
    this.input.addEventListener("keydown", this.handleKeydown.bind(this));
  },
  handleInput: function () {
    this.clearResults();
    const { value } = this.input;
    if (value.length < 1) return;
    const strongMatch = new RegExp("^" + value, "i");
    const weakMatch = new RegExp(value, "i");
    const results = recipes // smileslib
      .filter((recipe) => weakMatch.test(recipe.name))
      .sort((a, b) => {
        if (strongMatch.test(a.name) && !strongMatch.test(b.name)) return -1;
        if (!strongMatch.test(a.name) && strongMatch.test(b.name)) return 1;
        return a.name < b.name ? -1 : 1;
      });
    for (const recipe of results) {
      const item = document.createElement("li");
      const matchedText = weakMatch.exec(recipe.name)[0];
      item.innerHTML = recipe.name.replace(
        matchedText,
        "<strong>" + matchedText + "</strong>"
      );
      item.dataset.description = recipe.description;
      item.dataset.name = recipe.name;
      this.resultHolder.appendChild(item);

      item.addEventListener("click", (evt) => {
        this.handleClick(evt);
      });
    }
  },
  handleClick: function (evt) {
    this.doResult(evt.target.dataset);
  },
  getResults: function () {
    return this.resultHolder.children;
  },
  clearResults: function () {
    this.selectedIndex = -1;
    while (this.resultHolder.firstChild) {
      this.resultHolder.removeChild(this.resultHolder.firstChild);
    }
  },
  doResult: (r) => {
    console.log("yes!", r);
    document.querySelector("#result-desc").innerText = r.description;
    document.querySelector("#result-name").innerText = r.name;
  },
  handleKeydown: function (event) {
    const { keyCode } = event;
    console.log(keyCode);
    const results = this.getResults();
    if (keyCode === 40 && this.selectedIndex < results.length - 1) {
      this.selectedIndex++;
    } else if (keyCode === 38 && this.selectedIndex >= 0) {
      this.selectedIndex--;
    } else if (keyCode === 9) {
      event.preventDefault();
      console.log(results[0].dataset);
      this.input.value = results[0].dataset.name;
    } else if (keyCode === 13 && results[this.selectedIndex]) {
      this.doResult(results[this.selectedIndex].dataset);
    } else if (keyCode === 13) {
      this.doResult(results[0].dataset);
    }
    for (let i = 0; i < results.length; i++) {
      const result = results[i];
      const selectedClass = "selected";
      if (i === this.selectedIndex) {
        result.classList.add(selectedClass);
      } else if (result.classList.contains(selectedClass)) {
        result.classList.remove(selectedClass);
      }
    }
  }
};

typeahead.init();

Upvotes: 0

mgarcia
mgarcia

Reputation: 6325

I think that the problem is caused by the library versions you are using in the fiddle.

In the typeahead examples they seem to use jQuery 1.10.2 while you are using a more advanced version.

Furthermore, you are using a jquery.typeahead.min.js plugin that seems to not be the same as the typeahead.jquery.js plugin that is used in the typeahead documentation pages (note the change in order of the plugins names).

I built this jsfiddle in which I only changed those libraries and it works correctly.

Upvotes: 2

Related Questions