逐步 如何将 selectize.JS 包含在 rails 项目中构建 Ajax 请求和 Json 答案？
Step by Step How to include selectize.JS within a rails project build the Ajax request and Json answer?
而且我听说了 lib 调用 selectize。这听起来是一个很好的库，可以帮助我显示一些很棒的下拉效果。然而，文档并不是很容易，我对如何正确实施 selectize 一无所知。我尝试过使用它，直到使用或实现 ajax 才可以。有什么帮助吗？
出于某些原因，当我调用 selectize 到特定的 selectclass 时它起作用了。但是当我需要告诉 selectize 组件发出 ajax 请求并搜索 JSON 文件以获得答案并构建下拉列表时 select 我有严重的问题。
文档建议使用 github 示例的模式：
$('#select-repo').selectize({
valueField: 'url',
labelField: 'name',
searchField: 'name',
create: false,
render: {
option: function(item, escape) {
return '<div>' +
'<span class="title">' +
'<span class="name"><i class="icon ' + (item.fork ? 'fork' : 'source')
+ '"></i>' + escape(item.name) + '</span>' +
'<span class="by">' + escape(item.username) + '</span>' +
'</span>' +
'<span class="description">' + escape(item.description) + '</span>' +
'<ul class="meta">' +
(item.language ? '<li class="language">' + escape(item.language) +
'</li>' : '') +
'<li class="watchers"><span>' + escape(item.watchers) + '</span>
watchers</li>' +
'<li class="forks"><span>' + escape(item.forks) + '</span> forks</li>'
+ '</ul>' +
'</div>';
}
},
score: function(search) {
var score = this.getScoreFunction(search);
return function(item) {
return score(item) * (1 + Math.min(item.watchers / 100, 1));
};
},
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: 'https://api.github.com/legacy/repos/search/' +
encodeURIComponent(query),
type: 'GET',
error: function() {
callback();
},
success: function(res) {
callback(res.repositories.slice(0, 10));
}
});
}
});
我试过没有成功，因为我真的不知道如何构建JSON文件，查询也是一个非常困难的问题。
实际结果是我需要了解在使用该库之前需要构建的步骤。然后一旦完成，我将使用带有 ajx 请求的库
欢迎来到堆栈。您提到的几个步骤没有添加很多描述。但不管你使用什么 Lib，你都需要阅读并再次阅读它的文档。
Rails 和 JavaScript 库通过 webpack 协同工作。无论您需要什么库。你会找到你想要的库 Yarn。
从selectize.js库到视图，你至少需要玩一些file.js，file.rb，file.json，routes.rb这是一个很大的问题....
让我们从该设置开始，如果需要更多信息，我会花更多时间
您当前的rails应用是否添加webpack？
作为 RoR，我们必须设法调用一些 JavaScript 库并编写它们的自定义脚本。
老方法是玩那个文件app/assets/javascripts
现代方法是使用 webpack。并在此文件中做一些事情，例如 app/javascript/packs/application.js
我想 webpack 安装是因为你标记了那个词。请注意，可以通过旧方法进行处理，但保持更新
纱线
根据link上面的yarn
使用该命令行
在您的应用程序中安装 selectize.js
$ yarn add selectize
这将在您的文件中添加最新版本的 selectize package.json
正确调用selectize
$ mkdir app/javascript/components ## to create a folder to file your JS components
$ touch app/javascript/components/selectize.js ## to create a file to build JS components
移动到您的 node_modules 文件夹，其中包含您安装或未安装的所有 javascript 库。此文件夹是您应用程序的根目录。
(1) 然后找出文件 node_modules/selectize/dist
然后用你的文本编辑器打开文件app/javascript/components/selectize.js，让我们编写基本代码...
# app/javascript/components/selectize.js
import 'selectize/dist/js/selectize.min.js'; # scroll to node folder (1) get that path
import 'selectize/dist/css/selectize.css'; # scroll to node folder (1) get that path
const selectize = () => {
$('.select-beast').selectize({
// create: true, (from example on selectize page)
sortField: 'text'
});
};
export { selectize }; # app/javascript/packs/application.js will call that const
然后用你的文本编辑器打开文件inside app/javascript/packs/application.js，让我们编写基本代码...
正确调用selectize组件
# inside app/javascript/packs/application.js
import { selectize } from '../components/selectize'; # import the component
// selectize(); # init the component ⚠️ comment that line for now
使用正确的选择显示表格 class 选择 ('.select-beast')
类似 ruby ...
中的内容
<%= form_for @category do |f| %>
<%= f.text_field :name %>
<%= f.select(:single_option_ids,
SingleOption.all.collect {|a| [a.name, a.id]},
{:include_blank => "category select"},
{:class => "select-beast"})-%>
<%end %>
你的输出是...
<!-- where you want in your app -->
<select class="select-beast" name="category[single_option_ids]" id="category_single_option_ids"><option value="">category select</option>
<option value="1">category A</option>
<option value="2">category B</option>
...
<option value="37">category X</option>
<option value="38">category Y</option>
<option value="39">category Z</option>
</select>
以正确的方式初始化选择
# inside app/javascript/packs/application.js
import { selectize } from '../components/selectize'; # import the component
selectize(); # init the component
完成 ✅
刷新你的页面就可以了。
如果问题仍然存在...
具有 css 风格
（来自 selectize 的 css 不工作？未加载？未提取？..）移动到 config/webpacker.yml
# line 51
development:
<<: *default
compile: true
extract_css: true
还要检查并确保加载来自 webpack 的 CSS ...
怎么知道这个？
看看你的 webpack-dev-server 控制台
Version: webpack 4.32.2
Time: 2351ms
Built at: 06/05/2019 9:21:14 AM
Asset Size Chunks Chunk Names
css/application-ff5bcd2e.css 7.73 KiB application [emitted] application
# this line is a css asset from webpack so css from webpack is loaded
...# other lines
ℹ ｢wdm｣: Compiled successfully.
“$ 未定义”或内部错误 javascript 控制台
确保您的 webpack 设置包括这一行 ...
# inside config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
// Preventing Babel from transpiling NodeModules packages
environment.loaders.delete('nodeModules');
// Bootstrap 4 has a dependency over jQuery & Popper.js:
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
module.exports = environment
# config/webpack/development.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
# config/webpack/production.js
process.env.NODE_ENV = process.env.NODE_ENV || 'production'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
完成
我认为从 webpack 和 rails 入手没有更好的方法。
那么可以肯定的是，API、JSON、搜索是通过 js 库（如 selectize、choice 甚至最后的 select2）进行搜索的好方法。
让我们知道这是否是回答您问题的良好开端
'STEP BY STEP ...'
而且我听说了 lib 调用 selectize。这听起来是一个很好的库，可以帮助我显示一些很棒的下拉效果。然而，文档并不是很容易，我对如何正确实施 selectize 一无所知。我尝试过使用它，直到使用或实现 ajax 才可以。有什么帮助吗？
出于某些原因，当我调用 selectize 到特定的 selectclass 时它起作用了。但是当我需要告诉 selectize 组件发出 ajax 请求并搜索 JSON 文件以获得答案并构建下拉列表时 select 我有严重的问题。
文档建议使用 github 示例的模式：
$('#select-repo').selectize({
valueField: 'url',
labelField: 'name',
searchField: 'name',
create: false,
render: {
option: function(item, escape) {
return '<div>' +
'<span class="title">' +
'<span class="name"><i class="icon ' + (item.fork ? 'fork' : 'source')
+ '"></i>' + escape(item.name) + '</span>' +
'<span class="by">' + escape(item.username) + '</span>' +
'</span>' +
'<span class="description">' + escape(item.description) + '</span>' +
'<ul class="meta">' +
(item.language ? '<li class="language">' + escape(item.language) +
'</li>' : '') +
'<li class="watchers"><span>' + escape(item.watchers) + '</span>
watchers</li>' +
'<li class="forks"><span>' + escape(item.forks) + '</span> forks</li>'
+ '</ul>' +
'</div>';
}
},
score: function(search) {
var score = this.getScoreFunction(search);
return function(item) {
return score(item) * (1 + Math.min(item.watchers / 100, 1));
};
},
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: 'https://api.github.com/legacy/repos/search/' +
encodeURIComponent(query),
type: 'GET',
error: function() {
callback();
},
success: function(res) {
callback(res.repositories.slice(0, 10));
}
});
}
});
我试过没有成功，因为我真的不知道如何构建JSON文件，查询也是一个非常困难的问题。
实际结果是我需要了解在使用该库之前需要构建的步骤。然后一旦完成，我将使用带有 ajx 请求的库
欢迎来到堆栈。您提到的几个步骤没有添加很多描述。但不管你使用什么 Lib，你都需要阅读并再次阅读它的文档。
Rails 和 JavaScript 库通过 webpack 协同工作。无论您需要什么库。你会找到你想要的库 Yarn。
从selectize.js库到视图，你至少需要玩一些file.js，file.rb，file.json，routes.rb这是一个很大的问题....
让我们从该设置开始，如果需要更多信息，我会花更多时间
您当前的rails应用是否添加webpack？
作为 RoR，我们必须设法调用一些 JavaScript 库并编写它们的自定义脚本。
老方法是玩那个文件app/assets/javascripts
现代方法是使用 webpack。并在此文件中做一些事情，例如 app/javascript/packs/application.js
我想 webpack 安装是因为你标记了那个词。请注意，可以通过旧方法进行处理，但保持更新
纱线
根据link上面的yarn
使用该命令行
在您的应用程序中安装 selectize.js$ yarn add selectize
这将在您的文件中添加最新版本的 selectize package.json
正确调用selectize
$ mkdir app/javascript/components ## to create a folder to file your JS components
$ touch app/javascript/components/selectize.js ## to create a file to build JS components
移动到您的 node_modules 文件夹，其中包含您安装或未安装的所有 javascript 库。此文件夹是您应用程序的根目录。
(1) 然后找出文件 node_modules/selectize/dist
然后用你的文本编辑器打开文件app/javascript/components/selectize.js，让我们编写基本代码...
# app/javascript/components/selectize.js
import 'selectize/dist/js/selectize.min.js'; # scroll to node folder (1) get that path
import 'selectize/dist/css/selectize.css'; # scroll to node folder (1) get that path
const selectize = () => {
$('.select-beast').selectize({
// create: true, (from example on selectize page)
sortField: 'text'
});
};
export { selectize }; # app/javascript/packs/application.js will call that const
然后用你的文本编辑器打开文件inside app/javascript/packs/application.js，让我们编写基本代码...
正确调用selectize组件
# inside app/javascript/packs/application.js
import { selectize } from '../components/selectize'; # import the component
// selectize(); # init the component ⚠️ comment that line for now
使用正确的选择显示表格 class 选择 ('.select-beast')
类似 ruby ...
中的内容<%= form_for @category do |f| %>
<%= f.text_field :name %>
<%= f.select(:single_option_ids,
SingleOption.all.collect {|a| [a.name, a.id]},
{:include_blank => "category select"},
{:class => "select-beast"})-%>
<%end %>
你的输出是...
<!-- where you want in your app -->
<select class="select-beast" name="category[single_option_ids]" id="category_single_option_ids"><option value="">category select</option>
<option value="1">category A</option>
<option value="2">category B</option>
...
<option value="37">category X</option>
<option value="38">category Y</option>
<option value="39">category Z</option>
</select>
以正确的方式初始化选择
# inside app/javascript/packs/application.js
import { selectize } from '../components/selectize'; # import the component
selectize(); # init the component
完成 ✅
刷新你的页面就可以了。
如果问题仍然存在...
具有 css 风格
（来自 selectize 的 css 不工作？未加载？未提取？..）移动到 config/webpacker.yml
# line 51
development:
<<: *default
compile: true
extract_css: true
还要检查并确保加载来自 webpack 的 CSS ... 怎么知道这个？ 看看你的 webpack-dev-server 控制台
Version: webpack 4.32.2
Time: 2351ms
Built at: 06/05/2019 9:21:14 AM
Asset Size Chunks Chunk Names
css/application-ff5bcd2e.css 7.73 KiB application [emitted] application
# this line is a css asset from webpack so css from webpack is loaded
...# other lines
ℹ ｢wdm｣: Compiled successfully.
“$ 未定义”或内部错误 javascript 控制台
确保您的 webpack 设置包括这一行 ...
# inside config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
// Preventing Babel from transpiling NodeModules packages
environment.loaders.delete('nodeModules');
// Bootstrap 4 has a dependency over jQuery & Popper.js:
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
module.exports = environment
# config/webpack/development.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
# config/webpack/production.js
process.env.NODE_ENV = process.env.NODE_ENV || 'production'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
完成
我认为从 webpack 和 rails 入手没有更好的方法。 那么可以肯定的是，API、JSON、搜索是通过 js 库（如 selectize、choice 甚至最后的 select2）进行搜索的好方法。 让我们知道这是否是回答您问题的良好开端 'STEP BY STEP ...'