Hallo Community,
ich habe für unsere Website ein Script gebastelt was eine Mehrfachfilterfunktion anbietet. Die Eingabe erfolgte durch eine User Text Input getrennt durch ein Semikolon. Nach der Eingabe und dem Klick auf Filtern wurde der bestehende URL um bestimmte Eingaben ergänzt und der Filter funktioniert.
Da ich Tippfehler vermeiden wollte, habe ich nun eine "Autocomplete" Funktion mit eingebaut. Das funktioniert auch super, allerdings werden mir diese ausgewählten Eingaben dann nicht mehr mit an den URL gehängt. Ich weiß das mein Code "+ textbox.value" das Problem ist, weil der URL mit meinem restlichen "linkhref" ergänzt wird. Was muss ich denn ändern, damit meine "Auswahl" auch übernommen wird? Ich komme hier einfach nicht weiter.
ich habe für unsere Website ein Script gebastelt was eine Mehrfachfilterfunktion anbietet. Die Eingabe erfolgte durch eine User Text Input getrennt durch ein Semikolon. Nach der Eingabe und dem Klick auf Filtern wurde der bestehende URL um bestimmte Eingaben ergänzt und der Filter funktioniert.
Da ich Tippfehler vermeiden wollte, habe ich nun eine "Autocomplete" Funktion mit eingebaut. Das funktioniert auch super, allerdings werden mir diese ausgewählten Eingaben dann nicht mehr mit an den URL gehängt. Ich weiß das mein Code "+ textbox.value" das Problem ist, weil der URL mit meinem restlichen "linkhref" ergänzt wird. Was muss ich denn ändern, damit meine "Auswahl" auch übernommen wird? Ich komme hier einfach nicht weiter.
Code:
<script>
$(function() {
var availableTags = [
"Neu",
"New",
"Hallo",
"Test"
];
function split( val ) {
return val.split( /;\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tags" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "ui-autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( "; " );
return false;
}
});
});
</script>
</head>
<body>
<label for="tags">Titel: </label>
<input type="text" id="tags" onchange="adjustLink();" />
<a href="#" id="filterLink">Filtern</a>
<script type="text/javascript">
function adjustLink() {
var link = document.getElementById("filterLink");
var textbox = document.getElementById("tags");
link.href = "AllItems.aspx?FilterName=Title&FilterMultiValue=" + textbox.value;
}
</script>
</body>
</html>
