如何重定向自動完成？

我正在使用awesomplete autocomplete plugin，我想在我關注myinput時打開自動完成列表，但是當我點擊任何選項時，我的選擇都必須重定向到我想要的任何鏈接。我可以這樣做嗎？如何重定向自動完成？

.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>

例如，當我鍵入Javascript或當我選擇Javascript比頁必須重定向http://www.blabla.com

來源

2017-04-04 ani_css

官方插件URL都可用的事件。看看這裏（http://leaverou.github.io/awesomplete/#events）使用'awesomplete-select'事件 –

是的插件可用於這種情況，但我是一個新的jquery我試圖學習如何使用這個事件 –

有一個例子，類似於'Awesomplete。$（'。dropdown-btn'）。addEventListener（「click」，function（）{ if（comboplete.ul.childNodes.length == = 0）{ \t \t comboplete.minChars = 0; \t \t comboplete.evaluate（）; \t} \t否則如果（comboplete.ul.hasAttribute（ '隱藏'））{ \t \t comboplete.open（） ; \t} \t else { \t \t comboplete.close（）; \t} }）;'如果你走向頁面的底部 –

添加一個回調到oninput事件到您輸入

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

，然後添加一個腳本函數：

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

來源

2017-04-04 20:48:40

$("#datalist").change(function(){ 
 
console.log("working"); 
 
});

set id like this for the input. 
 

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

來源

2017-04-04 21:10:06

如何重定向自動完成？

回答

相關問題