CODEWITHSUNDEEP
javascriptasp.net-mvctwitter-bootstraptypeahead.js
GeekyOmega
GeekyOmega

Reputation: 1339

Why does typeahead not work for this MVC5 application?

Problem

I cannot implement twitter typeahead for my MVC 5 application. I can enter in text, but there is no type ahead or autocomplete.

Update

I tried to implement "working" example on fiddle. I am sure that if I can get these examples to work, then so too my application?

Attempts

I have checked the twitter api. I also have looked at several tutorials. See below:

Tutorial 2 contained fiddle code which also doesn't work and behaves similarly to my MVC application. See here for fiddle code.

Code

My entire application has it's own repo. You can find it here. I include my stand alone view here. I do use a shared layout to put in the necessary javascript.

I am not sure why this doesn't work (code also from tutorial), but would deeply appreciate your assistance. I cannot spot any obvious syntactic errors. 

 @{
    ViewBag.Title = "TypeAhead";
}
<script>
    var substringMatcher = function (strs) {
        return function findMatches(q, cb) {
            var matches, substrRegex;

            // 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)) {
                    // the typeahead jQuery plugin expects suggestions to a
                    // JavaScript object, refer to typeahead docs for more info
                    matches.push({ value: 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',
        displayKey: 'value',
        source: substringMatcher(states)
    });
</script>
<body>
    <div id="the-basics">
        <input class="typeahead" type="text" placeholder="States of USA">
    </div> 
</body>

Upvotes: 1

Views: 455

Answers (1)

Pierre
Pierre

Reputation: 166

the fiddle is working if you add the //twitter.github.com/typeahead.js/releases/latest/typeahead.jquery.min.js in the "External Resources" (left menu) not in the css box (and with jquery.min).

So maybe something similar in your project too. Maybe call $(...).typeahead(...) into a 

$(document).ready(function () { $(...).typeahead(...) })

Upvotes: 1

Related Questions