在 java 脚本中显示文本字段的独立自动转换选项

Question

我有一个虚拟的html代码，我正在测试JS代码。

此代码有三个文本框：

dynamic
static
both

对于其中的每一个，我想显示不同的自动完成选项：

var dynamic = ["JavaScript", "Python", "Ruby"]
var static = ["C", "C++", "Java"]
var both = ["JavaScript", "Python", "Ruby", "C", "C++", "Java"]

我目前正在做的是调用一个函数，该函数将 ID 和选项作为参数，三次，每种情况一次：

function show_options(field_id, available_options) {
$(`[id*=${field_id}]`).autocomplete({
source: available_options,
minLength: 0
})
.focus(function() {
$(this).autocomplete("search", $(this).val())
});
};

var dynamic = ["JavaScript", "Python", "Ruby"]
var static = ["C", "C++", "Java"]
var both = ["JavaScript", "Python", "Ruby", "C", "C++", "Java"]

show_options("dynamic", dynamic)
show_options("static", static)
show_options("both", both)

<div class="ui-widget">
<label for=“tags”>Input1: </label>
<input id="dynamic">
</div>
<div class="ui-widget">
<label for="tags">Input2: </label>
<input id="static">
</div>
<div class="ui-widget">
<label for="input3">Input3: </label>
<input id="both">
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet” href=“/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

这种工作，但对我来说确实是一种非常糟糕的做法。

我这样做的原因是因为我事先不知道ID，并且选项将从外部服务器接收。

Answer 1

如何向这些输入添加相同的class，然后创建一个新函数，该函数能够autocomplete事件附加到具有相同class的所有输入，并且它id用于数据占位符检测(检测哪些数据将用于输入的占位符(。因此，使用这种方法，您不必再担心id。您需要做的就是在从外部服务器获取数据后，将其分配给变量名称，该名称与要使用它的输入的 id 相同

function show_options(selector) {
// check if exist selector
if ($(selector).length > 0){
$(selector).each(function(){
// check if exist data relevant to the id of input
if (Array.isArray(window[$(this).attr('id')])) {
available_options = window[$(this).attr('id')];
$(this).autocomplete({
source: available_options,
minLength: 0
})
.focus(function() {
$(this).autocomplete("search", $(this).val())
});
}
});
}
};
// get data from external server
// and assign it to variable which has the same name with the id in input 
var dynamic = ["JavaScript", "Python", "Ruby"]
var static = ["C", "C++", "Java"]
var both = ["JavaScript", "Python", "Ruby", "C", "C++", "Java"]
show_options(".auto-complete");

<div class="ui-widget">
<label for=“tags”>Input1: </label>
<input class="auto-complete" id="dynamic">
</div>
<div class="ui-widget">
<label for="tags">Input2: </label>
<input class="auto-complete" id="static">
</div>
<div class="ui-widget">
<label for="input3">Input3: </label>
<input class="auto-complete" id="both">
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet” href=“/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

希望这会有所帮助。如果我错了，请纠正我

Answer 2

Datalist比jquery好得多。 可以嵌入JavaScript

下面是一个动态示例：

const dynamics = ["JavaScript", "Python", "Ruby"];
function addOptions(inputID, list) {
var container = document.getElementById(inputID),
data = document.createElement('datalist');
data.id = 'dynamics';
for (const el of list) {
const option = document.createElement('option');
option.value = el;
data.appendChild(option);
}
container.appendChild(data);
}
addOptions('dynamic', dynamics);

<input id="dynamic" list="dynamics"/>

Answer 3

把你的代码变成一个插件怎么样！插件的插件;)这会将您的自动完成插件封装在您自己的自定义插件中，并具有传递配置选项和数据的功能。

<div class="ui-widget">
<label for="tags">Input1: </label>
<input id="dynamic">
</div>
<div class="ui-widget">
<label for="tags">Input2: </label>
<input id="static">
</div>
<div class="ui-widget">
<label for="input3">Input3: </label>
<input id="both">
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
(function() {
$.fn.myPlugin = function(o) {
var o = $.extend({
// These are the defaults.
source: [],
minLength: 0
}, o);
//why each? because you might want to run on multiple elements like - $('.myclass, #me, #metoo').myPlugin();
this.each(function() {
//--your original code 
$(this).autocomplete({
source: o.source,
minLength: o.minLength
})
.focus(function() {
$(this).autocomplete("search", $(this).val())
});
});
};
})();

//Plugin is ready - use it now!
$('#dynamic').myPlugin({
source: ["JavaScript", "Python", "Ruby"],
minLength: 0
});
$('#static').myPlugin({
source: ["C", "C++", "Java"],
minLength: 0
});
$('#both').myPlugin({
source: ["JavaScript", "Python", "Ruby", "C", "C++", "Java"],
minLength: 0
});
</script>

Answer 4

您可以使用哈希映射来存储数据和输入之间的关系，如下所示：

// This will be your data structure for the autocomplete
//
// The keys of this object are the input selectors,
// the values are the autocomplete values
//
// In your app you will probably be creating this object dynamically 
// from some extrenal data
const dataBySelector = {
'#dynamic': ["JavaScript", "Python", "Ruby"],
'#static': ["C", "C++", "Java"],
'#both': ["JavaScript", "Python", "Ruby", "C", "C++", "Java"],
// Now you can also do some silly stuff like this :)
'input:not(:disabled):visible': ["JavaScript", "Python", "Ruby"]
};
// Your function will accept the data object from above and initialize the autocompletes
function show_options(data) {
Object.keys(data).forEach(function(selector) {
// First we grab the data for this selector
const dataForAutocomplete = data[selector];

// Then we initialize the autocomplete and store the jQuery object
// so that you don't need to call $(this) all the time (a little performance optimization)
const $autocomplete = $(selector).autocomplete({
source: dataForAutocomplete,
minLength: 0
})
.focus(function() {
$autocomplete.autocomplete("search", $autocomplete.val())
});
})
}
// Then you call the function when necessary
show_options(dataBySelector);

这是一个有效的JSFiddle链接