Ik probeer een manier te vinden om JQuery Autocomplete met Callback Source te gebruiken die gegevens krijgen via een ajax JSON-objectlijst van de server.
Kan iemand een aantal richtingen geven?
Ik googled het maar kon geen complete oplossing vinden.
Antwoord 1, Autoriteit 100%
Perfect goed voorbeeld in de autocomplete docs met broncode.
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>
html
<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>
Antwoord 2, autoriteit 16%
Als u een complex json-object retourneert, moet u de succesfunctie van uw automatisch aanvullen als volgt wijzigen.
$.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
};
}));
}
});
Antwoord 3, autoriteit 8%
Mijn probleem was dat eindgebruikers begonnen te typen in een tekstvak en autocomplete (ACP)-suggesties zouden ontvangen en het aanroepbesturingselement zouden updaten als een suggestie was geselecteerd, aangezien de ACP standaard is ontworpen. Ik moest echter ook meerdere andere besturingselementen (tekstvakken, vervolgkeuzelijsten, enz.) bijwerken met gegevens die specifiek zijn voor de selectie van de eindgebruiker. Ik heb geprobeerd een elegante oplossing voor het probleem te vinden en ik denk dat degene die ik heb ontwikkeld de moeite waard is om te delen en hopelijk zal het je op zijn minst wat tijd besparen.
WebMethode (VoorbeeldWM.aspx):
-
DOEL:
- Om de SQL Server Stored Procedure-resultaten vast te leggen en deze als een JSON-tekenreeks terug te sturen naar de AJAX-aanroeper
-
OPMERKINGEN:
- Data.GetDataTableFromSP() – Is een aangepaste functie die een DataTable retourneert uit de resultaten van een opgeslagen procedure
- < System.Web.Services.WebMethod(EnableSession:=True) > _
- Openbare gedeelde functie GetAutoCompleteData(ByVal QueryFilterAs String) As String
//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
AutoAanvullen jQuery (AutoAanvullen.aspx):
- DOEL:
- Voer het Ajax-verzoek uit naar de webmethode en behandel vervolgens het antwoord
$(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);
}
});
});
Antwoord 4
$(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-code:
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);
}
Antwoord 5
Ik gebruikte de constructie van $.each (data [i], function (key, value)
Maar u moet vooraf de namen van de selectievelden matchen met de namen van de formulierelementen. Vervolgens, in de lus na “succes”, autocomplete elementen uit de “data” array. Heb dit gedaan: formulier automatisch aanvullen met ajax succes
Antwoord 6
Ik hoop dat dit helpt:
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);
}
});
});