tsunami
Grünschnabel
Hallo,
ich habe mir ein Autocomplete aus Codeschnipseln zusammengebastelt. Funktioniert bis auf einen kleinen Schönheitsfehler.
Wenn ich Text eingebe, der nicht in der Liste ist, wird das Feld geleert. Aber leider erst, wenn ich die Tab-Taste drücke. Wenn ich direkt auf den Submit Button klicke, wird dummerweise der fehlerhafte Datensatz abgeschickt.
Wie bekomme ich es hin, dass eine Eingabe von Text, der nicht in der Luste ist, erst gar nicht möglich ist oder alternativ der Submit Button einfach ausgeblendet wird. =>
Klappt, wird aber auch nur nach "tab" wieder eingeblendet. Schön wäre, wenn es bei tab und klick auf den korrekten Datensatz geht.
Beispiel:
Die Liste:
id:"1"
value:"Apfel",
id:"2"
value:"Birne",
id:"3"
value:"Banane"
Gebe ich nun zB Bananne ein schickt er zwar den korrekten id-Wert ab und es ist nur ein Schönheitsfehler.
Gebe ich nun zB xxxxx funktioniert es, sofern keine vorherigen Eigaben gemacht wurden, ansonsten nimmt er die id, von der vorherigen EIngabe. Gebe ich Banane123 ein geht es auch, id korrekt.
Irgenwelche Ansätze? Vielen Dank
tsunami
ich habe mir ein Autocomplete aus Codeschnipseln zusammengebastelt. Funktioniert bis auf einen kleinen Schönheitsfehler.
Wenn ich Text eingebe, der nicht in der Liste ist, wird das Feld geleert. Aber leider erst, wenn ich die Tab-Taste drücke. Wenn ich direkt auf den Submit Button klicke, wird dummerweise der fehlerhafte Datensatz abgeschickt.
Wie bekomme ich es hin, dass eine Eingabe von Text, der nicht in der Luste ist, erst gar nicht möglich ist oder alternativ der Submit Button einfach ausgeblendet wird. =>
Code:
document.getElementById('rowxxx').style.display = 'none' ;Beispiel:
Die Liste:
id:"1"
value:"Apfel",
id:"2"
value:"Birne",
id:"3"
value:"Banane"
Gebe ich nun zB Bananne ein schickt er zwar den korrekten id-Wert ab und es ist nur ein Schönheitsfehler.
Gebe ich nun zB xxxxx funktioniert es, sofern keine vorherigen Eigaben gemacht wurden, ansonsten nimmt er die id, von der vorherigen EIngabe. Gebe ich Banane123 ein geht es auch, id korrekt.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var projects = [
{value: "1",label:"Apfel"},{value: "2",label:"Birne"},{value: "3",label:"Banane"},{value: "4",label:"Pflaume"} ];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
return false;
},
selectFirst: true,
click: function (event, ui) {
if (ui.item == null){
//here is null if entered value is not match in suggestion list
$(this).val((ui.item ? ui.item.id : ""));
// $( "#project-id" ).val( ui.item.value )="";
// $( "#project" ).val( ui.item.value )="";
document.getElementById('rowxxx').disabled = true;
}
else
document.getElementById('rowxxx').disabled = false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<div>" + item.label + "<br>" + item.desc + "</div>" )
.appendTo( ul );
};
} );
</script>
</head>
<body>
<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
<form method="post" action="ajax2.php">
<input id="project" name="nummer" placeholder="fucking Javascript">
<input type="hidden" id="project-id" name="id">
<input type="submit" id="rowxxx"> </form>
</body>
</html>tsunami
und Amerika mit Jones ebenfalls nicht. Aber diese beiden Fälle werden nicht vorkommen.
