जवाबों:
स्रोत कोड के साथ स्वतः पूर्ण डॉक्स में बिल्कुल अच्छा उदाहरण ।
jQuery
<script>
$(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" );
}
});
});
</script>
एचटीएमएल
<div class="ui-widget">
<label for="city">Your city: </label>
<input id="city">
Powered by <a href="http://geonames.org">geonames.org</a>
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
log।
success: function( data ) {response( data );} works inside the ajax call. I mean, what is that प्रतिक्रिया () `कार्य? यह <li>डेटा के अनुसार कुछ तत्व बनाता है, लेकिन अगर मैं उस <li>तत्वों को अनुकूलित करना चाहता हूं, तो मुझे क्या करना चाहिए? मैं विशेषताओं की एक जोड़ी जोड़ना चाहूंगा ...
यदि आप एक जटिल जसन ऑब्जेक्ट लौटा रहे हैं, तो आपको निम्नानुसार अपने ऑटो-पूर्ण की सफलता समारोह को संशोधित करने की आवश्यकता है।
$.ajax({
url: "/Employees/SearchEmployees",
dataType: "json",
data: {
searchText: request.term
},
success: function (data) {
response($.map(data.employees, function (item) {
return {
label: item.name,
value: item.id
};
}));
}
});
मेरा मुद्दा यह था कि अंतिम उपयोगकर्ता एक टेक्स्टबॉक्स में टाइप करना शुरू कर देंगे और स्वतः पूर्ण (ACP) सुझाव प्राप्त करेंगे और कॉलिंग कंट्रोल को अपडेट करेंगे यदि कोई सुझाव डिफ़ॉल्ट रूप से ACP चुना गया हो। हालाँकि, अंत उपयोगकर्ता के चयन के लिए विशिष्ट डेटा के साथ मुझे कई अन्य नियंत्रण (टेक्स्टबॉक्स, ड्रॉपडाउन, आदि ...) को भी अपडेट करने की आवश्यकता थी। मैं इस मुद्दे का एक सुरुचिपूर्ण समाधान निकालने की कोशिश कर रहा हूं और मुझे लगता है कि जो मैंने विकसित किया है वह साझा करने के लायक है और उम्मीद है कि आप कम से कम हर समय बचाएंगे।
WebMethod (SampleWM.aspx):
उद्देश्य:
टिप्पणियाँ:
//Call to custom function to return SP results as a DataTable
// DataTable will consist of Field0 - Field5
Dim params As ArrayList = New ArrayList
params.Add("@QueryFilter|" & QueryFilter)
Dim dt As DataTable = Data.GetDataTableFromSP("AutoComplete", params, [ConnStr])
//Create a StringBuilder Obj to hold the JSON
//IE: [{"Field0":"0","Field1":"Test","Field2":"Jason","Field3":"Smith","Field4":"32","Field5":"888-555-1212"},{"Field0":"1","Field1":"Test2","Field2":"Jane","Field3":"Doe","Field4":"25","Field5":"888-555-1414"}]
Dim jStr As StringBuilder = New StringBuilder
//Loop the DataTable and convert row into JSON String
If dt.Rows.Count > 0 Then
jStr.Append("[")
Dim RowCnt As Integer = 1
For Each r As DataRow In dt.Rows
jStr.Append("{")
Dim ColCnt As Integer = 0
For Each c As DataColumn In dt.Columns
If ColCnt = 0 Then
jStr.Append("""" & c.ColumnName & """:""" & r(c.ColumnName) & """")
Else
jStr.Append(",""" & c.ColumnName & """:""" & r(c.ColumnName) & """")
End If
ColCnt += 1
Next
If Not RowCnt = dt.Rows.Count Then
jStr.Append("},")
Else
jStr.Append("}")
End If
RowCnt += 1
Next
jStr.Append("]")
End If
//Return JSON to WebMethod Caller
Return jStr.ToString
स्वतः पूर्ण jQuery (AutoComplete.aspx):
$(function() {
$("#LookUp").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "SampleWM.aspx/GetAutoCompleteData",
dataType: "json",
data:'{QueryFilter: "' + request.term + '"}',
success: function (data) {
response($.map($.parseJSON(data.d), function (item) {
var AC = new Object();
//autocomplete default values REQUIRED
AC.label = item.Field0;
AC.value = item.Field1;
//extend values
AC.FirstName = item.Field2;
AC.LastName = item.Field3;
AC.Age = item.Field4;
AC.Phone = item.Field5;
return AC
}));
}
});
},
minLength: 3,
select: function (event, ui) {
$("#txtFirstName").val(ui.item.FirstName);
$("#txtLastName").val(ui.item.LastName);
$("#ddlAge").val(ui.item.Age);
$("#txtPhone").val(ui.item.Phone);
}
});
});
$(document).on('keyup','#search_product',function(){
$( "#search_product" ).autocomplete({
source:function(request,response){
$.post("<?= base_url('ecommerce/autocomplete') ?>",{'name':$( "#search_product" ).val()}).done(function(data, status){
response(JSON.parse(data));
});
}
});
});
PHP कोड:
public function autocomplete(){
$name=$_POST['name'];
$result=$this->db->select('product_name,sku_code')->like('product_name',$name)->get('product_list')->result_array();
$names=array();
foreach($result as $row){
$names[]=$row['product_name'];
}
echo json_encode($names);
}
मैंने निर्माण का उपयोग किया था, $.each (data [i], function (key, value)
लेकिन आपको चयन तत्वों के नाम फार्म तत्वों के नामों के साथ पूर्व-मिलान करना होगा। फिर, "सफलता" के बाद लूप में, "डेटा" सरणी से स्वत: पूर्ण तत्व। यह किया: अजाक्स सफलता के साथ स्वत : पूर्ण रूप
आशा है कि ये आपकी मदद करेगा:
var token = document.getElementById('token').value;
var nombre = document.getElementById('txtNombre').value;
$("#txtNombre").keyup(function () {
$.ajax({
type: "POST",
url: host() + "Formulario/BuscarNombreAutocompletar/",
data: JSON.stringify({ "nombre": nombre }),
headers: {
'Authorization': 'Bearer ' + token
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var dataArray = [];
if (controlCarga(data)) {
$.each(data[1], function (i, item) {
dataArray.push(item.frmNombre)
});
$('#txtNombre').autocomplete({
clearButton: true,
source: dataArray,
selectFirst: true,
minLength: 2
});
}
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error: ' + xhr.responseText);
}
});
});