CODEWITHSUNDEEP
phpjquerylaravel-5.1typeahead.jslaravel-blade
Kyl
Kyl

Reputation: 45

Laravel 5.1 and Typeahead.js

I am attempting to use typeahed.js in my Laravel 5.1 blade view. I trying to recreate The Basics typeahed example but the states aren't displaying when attempting to search them.

Here is the code My main layout

<html>
<head>
    <title>App Name - @yield('title')</title>
    {{--<link rel="stylesheet" href="{{ URL::asset('assets/js/search.js') }}">--}}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="{{ URL::asset('js/bootstrap.min.js') }}"></script>


    {{--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>--}}


    <script type="text/javascript" src="{{ URL::asset('js/search.js') }}"></script>

    <link href="{{ URL::asset('css/app.css') }}" rel="stylesheet">
    <link href="{{ URL::asset('css/custom.css') }}" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>





</head>
<body>
@section('sidebar')

@show

<div class="container">
    @yield('content')
</div>
</body>
</html>

My blade view I am trying to view it in

@extends('layouts.main')



@section('content')

    <div id="the-basics">
        <input class="typeahead" type="text" placeholder="States of USA">
    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
    <script>
        var substringMatcher = function(strs) {
            return function findMatches(q, cb) {
                var matches, substringRegex;

                // an array that will be populated with substring matches
                matches = [];

                // regex used to determine if a string contains the substring `q`
                substrRegex = new RegExp(q, 'i');

                // iterate through the pool of strings and for any string that
                // contains the substring `q`, add it to the `matches` array
                $.each(strs, function(i, str) {
                    if (substrRegex.test(str)) {
                        matches.push(str);
                    }
                });

                cb(matches);
            };
        };

        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'
        ];

        $('#the-basics .typeahead').typeahead({
                                                  hint: true,
                                                  highlight: true,
                                                  minLength: 1
                                              },
                                              {
                                                  name: 'states',
                                                  source: substringMatcher(states)
                                              });
    </script>

@stop

Upvotes: 0

Views: 439

Answers (1)

Taha Paksu
Taha Paksu

Reputation: 15616

I've done the same earlier this week, and I've used Bloodhound for getting/formatting the ajax results. Here are my codes:

<input type="text" class="input-sm form-control typeahead-city" id="cities">

And the javascript:

// define the data source
var cities = new Bloodhound({
    datumTokenizer: function(datum) {
         return Bloodhound.tokenizers.whitespace;
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        wildcard: '%QUERY', // this is the replacement on the url
        url: '/citysearch/%QUERY',  // this is the url the request should be made to
        transform: function(response) {
            // convert the response to a object that contains the `value` key
            var results = $.map(response["_embedded"]["city:search-results"], function(city) {
                             return {
                                value: city.matching_full_name,
                                full: city
                          };
                      });
            return results;
        }
    }
});

// Initialize typeahead input with Bloodhound object as the source
$('.typeahead-city').typeahead(null, {
    display: 'value',
    source: cities,
    highlighter: function(item) {
        return "<img src='/img/marker_search.png'>&nbsp;" + item
    },
});

And I've used typeahead.bundle.min.js which contains both bloodhound and typeahead.

Upvotes: 1

Related Questions