সার্ভার থেকে একটি আজাক্স জেএসন অবজেক্ট তালিকার মাধ্যমে কলব্যাক উত্স ডেটা পাওয়ার সাথে jQuery স্বতঃপূরণ ব্যবহার করার একটি উপায় সন্ধান করার চেষ্টা করছি।
কেউ কিছু নির্দেশ দিতে পারে?
আমি এটি googled কিন্তু একটি সম্পূর্ণ সমাধান খুঁজে পেতে পারেন।
উত্তর:
উত্স কোড সহ স্বয়ংক্রিয়রূপে ডক্সে পুরোপুরি ভাল উদাহরণ ।
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
};
}));
}
});
আমার সমস্যাটি হ'ল শেষ ব্যবহারকারীরা একটি পাঠ্যবক্সে টাইপ করা শুরু করবেন এবং স্বনির্বাচিত (এসিপি) পরামর্শ পাবেন এবং এসিপি ডিফল্টরূপে নকশাকৃতভাবে প্রস্তাবিত হিসাবে বেছে নেওয়া হলে কলিং নিয়ন্ত্রণ আপডেট করে। তবে, আমাকে শেষের ব্যবহারকারীর নির্বাচনের নির্দিষ্ট ডেটা সহ একাধিক অন্যান্য নিয়ন্ত্রণ (পাঠ্যবাক্স, ড্রপডাউন, ইত্যাদি ...) আপডেট করতে হবে। আমি ইস্যুটির একটি মার্জিত সমাধান বের করার চেষ্টা করেছি এবং আমার মনে হয়েছে যে আমি বিকাশ করেছি তা ভাগ করে নেওয়ার পক্ষে এবং আশা করি কমপক্ষে কিছুটা সময় সাশ্রয় করবেন।
ওয়েবমেথোদ (নমুনা এমএমএসপিএক্স):
উদ্দেশ্য:
মন্তব্য:
//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));
});
}
});
});
পিএইচপি কোড:
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);
}
});
});