kenikavanbis
Terugkerende gebruiker
- Lid geworden
- 22 mei 2007
- Berichten
- 2.191
Volgende ik heb een autocomplete nu werkt die volledig maar als ik een lijst heb. dan krijg ik het fenomeen als ik naar beneden druk dat tja mijn lijst als het ware herlaad en door het snele script ik niet naar de juist kan lopen. Dus op dit moment totaal nutteloos .
voorlopige oplossing
de code werkt voor elke textbox, indien er element gelijk met het id _Acomplete_list bestaat .
dus geen lijst wordt er niet verzonden de check van de keys zijn pijltjes en enter die niet reageren en bijgevolg niet zullen doen zenden
pijltjes bij het selecteren van het element
enter bij het kiezen van het element
aanpassing zie --->
Code:
...
name="country" id="country" value="%country->value%" />
<datalist id="country_Acomplete_list"></datalist>
<div id="keylist">testkeylist:</div>
</div>
...
ajax.Ajax2visable = $.ajax({
url: urlto,
type: 'POST',
dataType: 'json',
data: fd,
processData: false,
contentType: false,
cache: false,
success: Acomplete.ok,
error: Acomplete.fail,
timeout: ajax.timeout
});
};
Acomplete.ok = function(data) {
Ajax2visable = null;
$("#country_Acomplete_div").html(data.Acompletelist);//
console.log(data);
...
//--------->
$("#keylist").append("Key: "+this.id + e.which);
}
...
</script>
Code:
<div class="col-lg-5 col-md-5 col-sm-5">
<label class="control-label col-lg-4 col-md-4 col-sm-4" for="country">%country%</label>
<input type="text" class="input-sm col-lg-3 col-md-3 col-sm-3 text-right" list="country_Acomplete_list" name="country" id="country" value="%country->value%" autocomplete="off" />
<datalist id="country_Acomplete_list"></datalist>
</div>
<div class="col-lg-5 col-md-5 col-sm-5">
<label class="control-label col-lg-4 col-md-4 col-sm-4" for="postcode">%postcode%</label>
<input type="text" class="input-sm col-lg-3 col-md-3 col-sm-3 text-right" list="postcode_Acomplete_list" name="postcode" id="postcode" value="%postcode->value%" autocomplete="off" />
<datalist id="postcode_Acomplete_list"></datalist>
</div>
<script type="text/javascript">
var Acomplete ={};
var sendfail = false;
Acomplete.send = function(urlto,fromid,text){
$('#ajaxLoader').show();
var fd = new FormData();
fd.append(fromid,text);
ajax.Ajax2visable = $.ajax({
url: urlto,
type: 'POST',
dataType: 'json',
data: fd,
processData: false,
contentType: false,
cache: false,
fromid:fromid,
success: function(data){
var html ='';
$.each(data.Acompletelist, function (index, item) {
html += "<option value='" + item + "'>";
});
$("#"+fromid+"_Acomplete_list").html(html)},
error: Acomplete.fail,
timeout: ajax.timeout
});
};
Acomplete.fail = function(jQXHR,jQMsg) {
ajax.Ajax2visable.abort();
Ajax2visable = null;
};
$(document).ready(function() {
$("input[type='text']").keyup(function(e){
if(document.getElementById(this.id+"_Acomplete_list")){
if(!(e.which>37&&e.which<41)&&e.which!=13){
var text = $(this).val();
Acomplete.send("%path.module->value%?Acomplete= ",this.id,text);
if(sendfail){
sendfail = false;
}
}
}
})
});
</script>
de code werkt voor elke textbox, indien er element gelijk met het id _Acomplete_list bestaat .
dus geen lijst wordt er niet verzonden de check van de keys zijn pijltjes en enter die niet reageren en bijgevolg niet zullen doen zenden
pijltjes bij het selecteren van het element
enter bij het kiezen van het element
aanpassing zie --->
Laatst bewerkt: