0

I'm trying to put this autocomplete.js widget into my rails project: http://andymatthews.net/code/autocomplete/

It works fine when I use it as a standalone project without using rails- putting array.html, code.js and jqm.autoComplete-1.5.2.js in the same folder, and running array.html in my browser. I get the drop down, autocomplete menu in the widget. All works well.

But when I put it in a new rails project - a project made for the purpose of trying to get this widget to work, so there's definitely no code conflicts, it's styled correctly, but my drop down menu does not appear. Any ideas what I'm doing wrong?

In my application.html.erb file I have code from the header of array.html, plus the standard rails header material - stylesheet_link_tag, javascript_include_tag and csrf:

<head>
  <title>AutocompleteTest</title>
  <meta content="initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
  <meta name="viewport" content="width=device-width" />
  <meta name="apple-mobile-web-app-capable" content="yes" />

<%= stylesheet_link_tag  "application", media: "all", "data-turbolinks-track" => true %>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>

In my assets/javascripts folder I've pasted code.js and jqm.autoComplete-1.5.2.js and in my application.js file I have:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require code
//= require jqm.autoComplete-1.5.2

My view code for the autocomplete js is:

<div data-role="content" class="ui-content" role="main">
<p>
In this example autoComplete uses a local array comprised of strings. This also shows an example of the matchFromStart property set to false.
</p>

<p>
<input type="text" id="searchField" placeholder="Categories" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset ui-focus">
</p><ul id="suggestions" data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"></ul>
<p></p>
</div>

In application.html.erb I yield to auto_complete.html.erb, which contains:

 <div data-role="content">

        <p>
            In this example autoComplete uses a local array comprised of strings. This also shows an example of the matchFromStart property set to false.
        </p>


        <p>
            <input type="text" id="searchField" placeholder="Categories">
            <ul id="suggestions" data-role="listview" data-inset="true"></ul>
        </p>

    </div>

</div>

<script>

    $("#mainPage").bind("pageshow", function(e) {

        var data = ['C', 'Clojure', 'Jenny!', 'Java', 'Scala', 'Objective-C', 'C++', 'PHP', 'C#', '(Visual) Basic', 'Python', 'Perl', 'JavaScript', 'Ruby', 'Visual Basic .NET', 'Transact-SQL', 'Lisp', 'Pascal', 'Bash', 'PL/SQL', 'Delphi/Object Pascal', 'Ada', 'MATLAB'];

        $("#searchField").autocomplete({
            target: $('#suggestions'),
            source: data,
            link: 'target.html?term=',
            minLength: 1,
            matchFromStart: false
        });
    });
</script>

Any idea why it's not working or any ideas?

Improve this question
8
  • Have you defined a controller method to return autocomplete json data? What does your view code look like for the autocomplete field? Commented Mar 27, 2014 at 15:08
  • @tirdadc With regards controller method, why would I have to do that? As for view code in the autocomplete field, I've updated my question accordingly. Commented Mar 27, 2014 at 18:22
  • OK, so you're not using the remote origin and pulling data, but you're using a local array that you're hardcoding into application.html.erb? How are you including the local array? Commented Mar 27, 2014 at 19:24
  • @tirdadc In application.html.erb I yield to auto_complete.html.erb. I've put the code from auto_complete.html.erb into the question above. The local array is held in the variable 'data'. Commented Mar 27, 2014 at 19:58
  • 1
    That's really not a good place to put that JS, but setting that aside for now, does it get executed? Can you look at the console? maybe add a console.log('test') right after your var declaration? Commented Mar 27, 2014 at 20:34
Related questions
3
Error with jquery-autocomplete in rails
0
Help with JQuery Autocomplete
2
undefined method `autocomplete' rails 3 and jquery
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.