I am trying to implement a way in which auto suggest would work with dynamically added input boxes. Everything is working fine with the static input types. i am able to request and retrieve result through ajax with static input types. But when i am trying to do the same thing with the dynamic inputs it is not working here is my code. any help would be appreciated.
<script src="js/jquery.js"></script>
<script src="js/jquery.autoSuggest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript">
$.noConflict();
jQuery(function(){
var rows = 0;
jQuery('#addRow').click(function(){
jQuery('#userRows').append('<div class="userRow"><input type="text" name="users['+rows+'][name]" /><input type="text" name="country" id="inputBox" /><input type="text" name="id-holder" id="id-holder"> <input type="text" id="price" name="users['+rows+'][price]" /><a href="javascript:;" class="removeRow">Remove</a> name="users['+rows+'][name]"<div>');
rows++;
location.reload();
});
jQuery(document).on('click', '.removeRow', function(){
jQuery(this).closest('.userRow').remove();
});
// Below just used to show the string on submit
});
</script>
<script type="text/javascript">
<?php
$pluginConf = "";
if(isset($_GET) && count($_GET) > 0){
extract($_GET);
if($limit == "") $limit = "10";
if($width == "") $width = "auto";
$pluginConf = '
$(function() {
$("#inputBox").autoSuggest({
ajaxFilePath : "server.php",
ajaxParams : "dummydata=dummyData",
autoFill : "'.$autofill.'",
iwidth : "'.$width.'",
opacity : "0.9",
ilimit : "'.$limit.'",
idHolder : "id-holder",
prices : "price",
match : "'.$match.'"
});
alert("Worked");
});';
} else {
$pluginConf = '
$(function() {
$("#inputBox").autoSuggest({
ajaxFilePath : "server.php",
ajaxParams : "dummydata=dummyData",
autoFill : false,
iwidth : "auto",
opacity : "0.9",
ilimit : "10",
idHolder : "id-holder",
prices : "price",
match : "contains"
});
alert("Worked");
}); ';
}
echo $pluginConf;
?>
</script>
</head>
<body>
<div>
Item Name @ Price
</div>
<form method="post" id="usersForm">
<div id="userRows">
<a href="javascript:;" id="addRow">Add Row</a><br />
</div>
<input type="submit" id="submit" value="Submit" />
<!--<input type="text" name="xxx" id="inputBox">
<input type="text" name="id-holder" id="id-holder">
<input type="text" name="price" id="price"> -->
</form>
</body>
</html>
