Question

我试图将此autocomplete.js小部件放入我的rails项目中：http://andymatthews.net/code/autocomplete/

当我将它作为独立项目使用时，它可以正常工作，而不使用rails-put array.html，code.js和jqm.autoComplete-1.5.2.js在同一个文件夹中，并在我的浏览器中运行array.html。我在小部件中获得了下拉，自动完成菜单。一切顺利。

但是，当我把它放在一个新的rails项目中 - 为了试图让这个小部件工作而制作的项目，所以肯定没有代码冲突，它的风格正确，但是我的下拉菜单不会出现。我有什么想法我做错了吗？

在我的application.html.erb文件中，我有来自array.html标题的代码，以及标准的rails标题材料 - stylesheet_link_tag，javascript_include_tag和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>

在我的assets / javascripts文件夹中，我已经粘贴了code.js和jqm.autoComplete-1.5.2.js，并且在我的application.js文件中，我有：

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

我自动填充js的视图代码是：

<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>

在application.html.erb中，我屈服于auto_complete.html.erb，其中包含：

 <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>

知道为什么它没有工作或任何想法？

试图让我的rails项目中的autocomplete.js小部件工作

0 个答案: