これは、あなたが予想より少し複雑です。しかし、私は同じロジック/技術を使用しています。
var tagSearch = function(_opts){
var search = {};
search.data = new Array();
search.errors = new Array();
/* defaults */
search.opts = {
tagsRootObject:"tags",
jsonEndPoint:"/echo/json/",
inputSelector:'input'
};
$.extend(true, search.opts, _opts);
/* get terms from external source */
search.getTerms = function(){
dfd = $.Deferred();
$.ajax({
type: "GET",
dataType: "json",
url: search.opts.jsonEndPoint,
success: function (data) {
if(data.hasOwnProperty('success') && data.success === true){
dfd.resolve(data);
}
},
error: function(jqXHR, textStatus, errorThrown){
console.log('Ajax Status', textStatus);
return false;
}
});
return dfd.promise();
}();
search.setTerms = function($form, data){
var terms = null,
term, $checkbox, $label, $fieldset;
if(data.hasOwnProperty(search.opts.tagsRootObject)){
terms = data[ search.opts.tagsRootObject ];
$fieldset = $('<fieldset>');
if(Object.keys(terms).length > 0){
$form.append($fieldset);
}
for(var t in terms){
term = terms[ t ];
$checkbox = $('<input>')
.attr({
id:'term_' + t,
class:'__term',
type:'checkbox'
})
.data('id', t);
$checkbox.appendTo($fieldset);
$label = $("<label>")
.text(t) // object key will be the label
.attr({for:'term_'+ t })
.insertAfter($checkbox);
/* setting up new titles */
if(search.opts.tags.hasOwnProperty(t)){
$label.text(search.opts.tags[ t ].label);
}
}
}else{
search.errors.push("Unable to find search terms");
}
};
$.widget("custom.catTags", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
},
_renderMenu: function(ul, items) {
var that = this,
currentCategory = "";
$.each(items, function(index, item) {
var li;
if (item.category != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
li = that._renderItemData(ul, item);
if (item.category) {
li.attr("aria-label", item.category + " : " + item.label);
}
});
}
});
search.run = function(config){
config.ele.catTags(config.settings);
//config.ele.catTags($.extend(config.settings, {source: search.data}));
};
$.when(search.getTerms).done(function (terms) {
/* if something needed from the beginning */
search.data = [
{ label: "Default value 1", category: "" },
{ label: "Default value 2", category: "" },
{ label: "Something", category: "" }
];
$(function() {
var $form, termsObj = {};
termsObj.enabled = new Array();
$form = $(search.opts.formSelector);
search.setTerms($form, terms);
/* Binding term checkboxes */
$form.on('click', '.__term', function(){
var $this = $(this),
termId, isChecked, termIndex;
search.data.length = 0;
termId = $this.data('id');
isChecked = $this.is(':checked');
if(isChecked){
termsObj.enabled[ termId ] = terms.records[ termId ];
}else{
if(termsObj.enabled.hasOwnProperty(termId)){
delete termsObj.enabled[ termId ];
}
}
for(var prop in termsObj.enabled){
var currentTerm, record, label;
currentTerm = termsObj.enabled[ prop ];
if(currentTerm instanceof Array){
currentTerm.map(function(obj) {
label = (search.opts.tags.hasOwnProperty(prop)) ? search.opts.tags[ prop ].label : prop;
record = {
label: obj,
category: label
};
search.data.push(record);
});
}
}
});
search.run({
ele: $form.find(search.opts.inputSelector),
settings:{
delay: 0,
source: search.data
}
});
});
});
if(search.errors.length > 0){
console.log("Errors:", search.errors);
}
}({
jsonEndPoint:'/gh/get/response.json/dkarandana/pub_response/tree/master/AutoCompleteDemo/',
tagsRootObject:'records',
formSelector:'form',
inputSelector:'#search',
tags:{
technology:{
label:"Technology"
},
model:{
label:"Model/Series"
},
manufacturer:{
label:"Manufacturer"
},
pdf:{
label:"PDF",
autocomplete:false
}
}
});
は誰があなたのために –
jQueryのAJAX APIを理解することが非常に簡単なコードを記述しなくなりますAJAXに関する科目を履修します。http：// api.jquery.com/jquery.ajax/ – Cheshire
jQueryを使用して、簡単なajax処理とDOM更新ができますか？ 2番目の入力オブジェクトのオプションを設定します。そのカテゴリを入力として（例えば$ _GET []で）取るPHPページが必要になり、セレクタのjqueryまたはinnerHtmlを使って切り替えることができるセレクタのオプションのHTMLブロックを返します。 –