2017-04-04 2 views
0

Ich benutze awesomplete autocomplete plugin und ich möchte Autocomplete-Liste zu öffnen, wenn ich Myinput Fokus, aber wenn ich eine beliebige Wahl als meine Wahl muss jeden Link umleiten, was ich will.wie kann ich das tun?Wie Umleitung Autocomplete?

.box{ 
 
    width:960px; 
 
} 
 
.awesomplete > ul { 
 
\t border-radius: .3em; 
 
\t margin: .2em 0 0; 
 
\t background: hsla(0,0%,100%,.9); 
 
\t background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8)); 
 
\t border: 1px solid rgba(0,0,0,.3); 
 
\t box-shadow: .05em .2em .6em rgba(0,0,0,.2); 
 
\t text-shadow: none; 
 
} 
 

 
@supports (transform: scale(0)) { 
 
\t .awesomplete > ul { 
 
\t \t transition: .3s cubic-bezier(.4,.2,.5,1.4); 
 
\t \t transform-origin: 1.43em -.43em; 
 
\t } 
 
\t 
 
\t .awesomplete > ul[hidden], 
 
\t .awesomplete > ul:empty { 
 
\t \t opacity: 0; 
 
\t \t transform: scale(0); 
 
\t \t display: block; 
 
\t \t transition-timing-function: ease; 
 
\t } 
 
} 
 

 
\t /* Pointer */ 
 
\t .awesomplete > ul:before { 
 
\t \t content: ""; 
 
\t \t position: absolute; 
 
\t \t top: -.43em; 
 
\t \t left: 1em; 
 
\t \t width: 0; height: 0; 
 
\t \t padding: .4em; 
 
\t \t background: white; 
 
\t \t border: inherit; 
 
\t \t border-right: 0; 
 
\t \t border-bottom: 0; 
 
\t \t -webkit-transform: rotate(45deg); 
 
\t \t transform: rotate(45deg); 
 
\t } 
 

 
\t .awesomplete > ul > li { 
 
\t \t position: relative; 
 
\t \t padding: .2em .5em; 
 
\t \t cursor: pointer; 
 
\t } 
 
\t 
 
\t .awesomplete > ul > li:hover { 
 
\t \t background: hsl(200, 40%, 80%); 
 
\t \t color: black; 
 
\t } 
 
\t 
 
\t .awesomplete > ul > li[aria-selected="true"] { 
 
\t \t background: hsl(205, 40%, 40%); 
 
\t \t color: white; 
 
\t } 
 
\t 
 
\t \t .awesomplete mark { 
 
\t \t \t background: hsl(65, 100%, 50%); 
 
\t \t } 
 
\t \t 
 
\t \t .awesomplete li:hover mark { 
 
\t \t \t background: hsl(68, 100%, 41%); 
 
\t \t } 
 
\t \t 
 
\t \t .awesomplete li[aria-selected="true"] mark { 
 
\t \t \t background: hsl(86, 100%, 21%); 
 
\t \t \t color: inherit; 
 
\t \t }
<div class="box"> 
 
<input class="awesomplete" list="mylist"/> 
 
    <datalist id="mylist"> 
 
\t <option>Ada</option> 
 
\t <option>Java</option> 
 
\t <option>JavaScript</option> 
 
\t <option>Brainfuck</option> 
 
\t <option>LOLCODE</option> 
 
\t <option>Node.js</option> 
 
\t <option>Ruby on Rails</option> 
 
</datalist> 
 
</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.js"></script>

Zum Beispiel, wenn ich schreibe Javascript oder wenn ich Javascript als Seite ausgewählt werden, müssen umleiten http://www.blabla.com

+1

Offizielle Plugin url haben alle Veranstaltungen zur Verfügung. Schau mal hier nach (http://leaverou.github.io/awesomplete/#events), um 'awesomplete-select' zu verwenden. –

+0

ja Plugin kann für diese Situation verfügbar sein, aber ich bin ein neues Mitglied bei jquery, das ich versuche Erfahren Sie, wie ich dieses Ereignis verwenden wird –

+0

gibt es ein Beispiel wie 'Awesomplete. $ ('. Dropdown-btn'). addEventListener (" click ", Funktion() { \t if (comboplete.ul.childNodes.length == = 0) { \t \t comboplete.minChars = 0; \t \t comboplete.evaluate(); \t} \t else if (comboplete.ul.hasAttribute ('versteckte')) { \t \t comboplete.open() ; \t} \t sonst { \t \t comboplate.close(); \t} }); 'wenn Sie nach unten auf der Seite gehen –

Antwort

0

einen Rückruf In den oninput Ereignis in zu Ihrem Eingang

<input class="awesomplete" oninput="callBack()" list="mylist"/> 

Und dann eine Skriptfunktion hinzufügen:

function callBack(){ 
    window.location.href = "http://stackoverflow.com"; 
} 
0

$("#datalist").change(function(){ 
 
console.log("working"); 
 
});
set id like this for the input. 
 

 
<input class="awesomplete" list="mylist" id="datalist"/>