buongiorno a tutti, ho configurato correttamente questo form che si autocompleta: http://jqueryui.com/autocomplete/#default
come faccio ora a farlo diventare eseguibile?vorrei che ogni parola fosse collegata ad un link e selezionandola si vada automaticamente in quel link (o creando un pulsante di invio).
vi ringrazio in anticipo per ogni eventuale aiuto.
nell'evento select fai una redirect al link associato
ciao vindav, scusami ma l'evento select devo crearlo io o si trova nel file jqueri-ui.css nel file jquery-ui.js o nel html?
non potresti farmi un esempio pratico per una singola parola?
grazie per l'aiuto.
Da quello che scrivi più che un esempio ti servirebbe tutto il codice da copiare/incollare. Magari leggi la documentazione, fare le cose a casaccio non aiuta di certo(c'è tutto quello che ti serve per capire cos'è l'evento select), per gli esempi vedi quelli sul sito. Il forum serve per dare consigli e aiuti su singoli parti di codice(tu di codice non ne hai postato), se non hai nemmeno le basi di html/css/js il forum non ti servirà a molto. Se hai del codice postalo.
si vindav, ammetto di essere a digiuno di programmazione,ho messo il codice html (penso ti riferissi a quello), sperando tu possa darmi una mano, ad esempio per associare a un link la parola "basic" che script dovrei creare ? una volta selezionata alla parola "basic" basta un click o dovrei creare un pulsante di avviamento???
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="jquery/jquery-ui.js"></script>
<style>
.ui-autocomplete {
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
max-width: 320px;
min-width:320px;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="boxricerca" align="center" ><div class="dentroricerca">
<div class="ui-widget" >
<label for="tags" ></label>
<input id="tags" >
</div>
</div>
</div>
</body>
</html>
ti faccio un esempio partendo dal quarto esempio che trovi sul sito(custom data and display, http://jqueryui.com/autocomplete/#custom-data)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<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>
$(function() {
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png",
link: "http://www.pippo.it"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png",
link: "http://www.pluto.it"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png",
link: "http://www.paperino.it"
}
];
$( "#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 );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
location.href = ui.item.link;
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.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="">
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>
</body>
</html>
scusami vindav ma hai usato un codice completamente differente da quello che ho usato io, tu hai usato l'esempio http://jqueryui.com/autocomplete/#custom-data, ma io l'ho fatto con questo script:http://jqueryui.com/autocomplete/#default , quindi mi ritrovo tutti i dati differenti, non potresti farmi un esempio con la demo che ho usato io? sopra ti ho postato anche il codice...
Di seguito l'ultimo esempio(in grassetto le modifiche), se non riesci a farlo andare ti conviene chiedere nella sezione offro lavoro o aspettare qualcun altro che ti risponda. Scusami ma avere a che fare con gente che non ci mette un minimo di voglia e aspetta solo la pappa pronta proprio non mi va, ciao.
$(function() {
var availableTags = [
{value:"ActionScript",link:"http://www.pippo.it"},
{value: "AppleScript",link:"http://www.pluto.it"},
];
$( "#tags" ).autocomplete({
source: availableTags,
select: function(event, ui){
location.href = ui.item.link;
}
});
});
vindav grazie a te sono riuscito a farlo funzionare, ti ringrazio di cuore e mi scuso per la mia ignoranza, ma sto imparando, solo che questo mi serviva subito.... spero che in futuro potrò ricambiare in qualche modo, grazie di nuovo!
Permessi di invio
Rispondi quotando