Jquery mobile 试图让autocomplete.js小部件在我的rails项目中工作_Jquery Mobile_Ruby On Rails 4_Autocomplete

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

jquery-mobile ruby-on-rails-4 autocomplete

Jquery mobile 试图让autocomplete.js小部件在我的rails项目中工作,jquery-mobile,ruby-on-rails-4,autocomplete,Jquery Mobile,Ruby On Rails 4,Autocomplete,我正在尝试将这个autocomplete.js小部件放入我的rails项目中：当我把它作为一个独立的项目使用而不使用rails时，它工作得很好——将array.html、code.js和jqm.autoComplete-1.5.2.js放在同一个文件夹中，并在浏览器中运行array.html。我在小部件中获得了下拉式自动完成菜单。一切都很好但是当我把它放在一个新的rails项目中时——一个为了让这个小部件工作而设计的项目，所以肯定没有代码冲突，它的样式是正确的，但是我的下拉菜单没有出现。知道

我正在尝试将这个autocomplete.js小部件放入我的rails项目中：

当我把它作为一个独立的项目使用而不使用rails时，它工作得很好——将array.html、code.js和jqm.autoComplete-1.5.2.js放在同一个文件夹中，并在浏览器中运行array.html。我在小部件中获得了下拉式自动完成菜单。一切都很好

但是当我把它放在一个新的rails项目中时——一个为了让这个小部件工作而设计的项目，所以肯定没有代码冲突，它的样式是正确的，但是我的下拉菜单没有出现。知道我做错了什么吗

在我的application.html.erb文件中，我有来自array.html标题的代码，加上标准rails标题材料-样式表\u link\u标记、javascript\u include\u标记和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>

我的自动完成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>



在本例中，autoComplete使用由字符串组成的本地数组。这还显示了matchFromStart属性设置为false的示例。

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



在本例中，autoComplete使用由字符串组成的本地数组。这还显示了matchFromStart属性设置为false的示例。




$（“#主页”）.bind（“页面显示”，函数（e）{
var data=['C'，'Clojure'，'Jenny！''，'Java'，'Scala'，'Objective-C'，'PHP'，'C++'，'C#'，'（Visual）Basic'，'Python'，'Perl'，'JavaScript'，'Ruby'，'Visual Basic.NET'，'Transact-SQL'，'Lisp'，'Pascal'，'Bash'，'PL/SQL'，'Delphi Object Pascal'，'Ada MATLAB']；
$（“#搜索字段”）.autocomplete({
目标：$（‘建议’），
资料来源：数据，
链接：“target.html？term=”，
最小长度：1，
matchFromStart:false
});
});

知道它为什么不工作吗？或者有什么想法吗？

您是否定义了一个控制器方法来返回自动完成的json数据？“自动完成”字段的视图代码是什么样子的？@tirdac关于控制器方法，我为什么要这样做？至于“自动完成”字段中的查看代码，我已经相应地更新了我的问题。好的，那么您不是使用远程源并提取数据，而是使用一个本地数组，将其硬编码到application.html.erb中？如何包括本地数组？@tirdadc在application.html.erb中，我同意使用auto_complete.html.erb。我已经把auto_complete.html.erb中的代码放到了上面的问题中。本地数组保存在变量“data”中。这确实不是一个放置JS的好地方，但是现在把它放在一边，它会被执行吗？你能看看控制台吗？可能在您的var声明之后添加一个

console.log（'test'）

？

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