vendredi 26 août 2016

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>
    ">--}}
    <script src="http://ift.tt/1XwG72U"></script>
    <script type="text/javascript" src=""></script>


    


    <script type="text/javascript" src=""></script>

    <link href="" rel="stylesheet">
    <link href="" 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="http://ift.tt/1CveVTY"></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="http://ift.tt/1LZ42nF"></script>
    <script src="http://ift.tt/1CveVTY"></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


via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire