jQuery 和 Javascript 的新手，不确定如何替换此自动完成
// autocomplete enablement
var availableAttributes = [
"account_address",
"account_address_city",
"account_address_country",
"account_address_state",
"account_address_street1",
"account_address_street2",
"account_address_zip",
"account_email",
"account_login",
"account_name",
"account_number",
"account_telephone"
];
在
$(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
// autocomplete enablement
var availableAttributes = [
"account_address",
"account_address_city",
"account_address_country",
"account_address_state",
"account_address_street1",
"account_address_street2",
"account_address_zip",
"account_email",
"account_login",
"account_name",
"account_number",
"account_telephone"
];
$( "input[name^='mytext']" ).autocomplete({
source: availableAttributes
});
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append($('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>').find(":text").autocomplete({
source: availableAttributes
})); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
使用(jQuery Jason 远程数据源自动完成。链接 http://jqueryui.com/autocomplete/#remote-jsonp)
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://gd.geobytes.com/AutoCompleteCity",
dataType: "jsonp",
data: {
q: request.term
},
success: function( data ) {
response( data );
}
});
},
minLength: 3,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
完整的 HTML，(jsfiddle)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<script>
var availableAttributes = [ "account_address", "account_address_city", "account_address_country", "account_address_state", "account_address_street1", "account_address_street2", "account_address_zip", "account_email", "account_login", "account_name", "account_number", "account_telephone"];
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
// $(wrapper).append('<div><input id="' + x + '" type="text" name="mytext"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
$(wrapper).append('<div>' + '<input id="' + x + '" type="text" name="mytext"><br>' + '<textarea name="desc[]"></textarea>' + '<a href="#" class="remove_field">Remove</a>' +'</div>');
$("input[id=" + x + "]").autocomplete({
source: availableAttributes
});
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
// autocomplete enablement
$(function() {
$("input[name^='mytext']").autocomplete({
source: availableAttributes
});
});
</script>
</head>
<body>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
<textarea name="desc[]"></textarea>
</div>
</body>
</html>
最佳答案
这是您发布内容的一个工作示例
$(document).ready(function() {
$(".myText").autocomplete({
source: function (request, response) {
jQuery.getJSON(
"http://gd.geobytes.com/AutoCompleteCity?callback=?&q="+request.term,
function (data) {
response(data);
}
);
},
minLength: 3
});
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
// $(wrapper).append('<div><input id="' + x + '" type="text" name="mytext"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
$(wrapper).append('<div>' + '<input id="' + x + '" type="text" class="myText" id="myText"><br>' + '<textarea name="desc[]"></textarea>' + '<a href="#" class="remove_field">Remove</a>' +'</div>');
$("#" + x).autocomplete({
source: function (request, response) {
jQuery.getJSON(
"http://gd.geobytes.com/AutoCompleteCity?callback=?&q="+request.term,
function (data) {
response(data);
}
);
},
minLength: 3
});
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
});
}); <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" class="myText" name="myText" id="myText"></div>
<textarea name="desc[]"></textarea>
</div>关于javascript - 在动态驱动的表单上应用 jQuery 自动完成 json 数据源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33636881/