I am having trouble executing the following code successfully. I want to get autocomplete data from the server on 1st field (drug1) which is successful. I want that the 2nd field (drugdose1) should return result based on the value of the 1st field (drug1). But I am unable to pass the value of the drug1 to the php file. The firefox debug displays as localhost/lib/searchdose.php?d=&q=xx.
Here is the code:
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type='text/javascript' src='lib/autocompletefull.js'></script>
<link rel="stylesheet" type="text/css" href="lib/autocomplete.css" />
<script type="text/javascript">
$(function() {
$("#drug1").autocomplete('lib/search.php', {
delay:100,
maxItemsToShow: 15,
minChars:2,
useCache:false
});
$("#drugdose1").autocomplete('lib/searchdose.php', {
delay:100,
minChars:2,
extraParams: { d: $("#drug1").val() }
});
});
</script>
</head><body>
<p>
<form name="hello">
<input type="hidden" id="testing" value="hi there">
Drug Name: <input type="text" tabindex="1" size="40" name="drug1" id="drug1">
</p>
<p>Drug Dose: <input tabindex="2" type="text" name="drugdose1" id="drugdose1" size="35">
</p>
</form>
I am using autocomplete.js from https://github.com/dyve/jquery-autocomplete ... I am not using jquery.ui autcomplete ..
Try this,
src = 'lib/searchdose.php';
$("#drugdose1").autocomplete({
source: function(request, response) {
$.ajax({
url: src,
dataType: "json",
data: {
d: $("#drug1").val()
},
success: function(data) {
response(data);
}
});
},
min_length: 3,
delay: 300
});
I have sort this problem on my own. Here is the solution:
<script type="text/javascript">
var dname;
function newv ()
{
dname = $("#drug1").val();
$("#drugdose1").autocomplete('lib/searchdose.php', {
delay:100,
maxItemsToShow: 15,
extraParams: { d:dname },
minChars:1,
useCache:false
});
alert("Hello");
}
$(function() {
$("#drug1").autocomplete('lib/search.php', {
delay:100,
maxItemsToShow: 15,
minChars:2
});
});
</script>
</head><body>
<p>
<form name="hello">
<input type="hidden" id="testing" value="hi there">
Drug Name: <input type="text" tabindex="1" size="40" name="drug1" id="drug1" onchange="javascript:newv();">
</p>
<p>Drug Dose: <input tabindex="2" type="text" name="drugdose1" id="drugdose1" size="35">
</p>
</form>