CODEWITHSUNDEEP
javascriptjquery
ani_css
ani_css

Reputation: 2126

Redirecting autocomplete

I'm using awesomplete autocomplete plugin and I need redirectin my item which I selected when you clicked any result for example I wrote a Javascript and after I clicked it than it must redirect any page that I want.I see events but I've no idea how to use it

My structure

$(document).ready(function() {

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

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

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

	.awesomplete > ul > li {
		position: relative;
		padding: .2em .5em;
		cursor: pointer;
	}
	
	.awesomplete > ul > li:hover {
		background: hsl(200, 40%, 80%);
		color: black;
	}
	
	.awesomplete > ul > li[aria-selected="true"] {
		background: hsl(205, 40%, 40%);
		color: white;
	}
	
		.awesomplete mark {
			background: hsl(65, 100%, 50%);
		}
		
		.awesomplete li:hover mark {
			background: hsl(68, 100%, 41%);
		}
		
		.awesomplete li[aria-selected="true"] mark {
			background: hsl(86, 100%, 21%);
			color: inherit;
		}
<input class="awesomplete dropdown-input" list="mylist" id="my-input" />
<datalist id="mylist">
	<option data-link="http://www.google.com">Ada</option>
	<option data-link="http://www.yahoo.com">Java</option>
	<option data-link="http://www.bing.com">JavaScript</option>
	<option data-link="http://www.yandex.com">Brainfuck</option>
	<option data-link="http://www.php.net">LOLCODE</option>
	<option data-link="http://www.asp.net">Node.js</option>
	<option data-link="http://www.microsoft.net">Ruby on Rails</option>
</datalist>


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

Upvotes: 0

Views: 343

Answers (2)

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14892

There is no native support to get the attribute of the chosen item.

To bind events, use the on function on the chosen selector.

In order to get the data-link attribute, you need to get the datalist and find the option with the text value.

Awesomplete is firing the event twice - once on the input field, and once on the containing div. I am listening for the event on the div by checking if its sibling is the datalist. Once I have that, I find the required option by using the :contains selector, passing in the input field value.

I have to wrap it in a setTimeout function as, at that point, Awesomplete has not yet populated the value attribute of the input field.

$(document).ready(function() {
  $('.awesomplete').on('awesomplete-select', function(){
    var $this = $(this),
        $sibling = $this.next();
    if($sibling.attr('id') == 'mylist') {
      setTimeout(function(){
        var val = $this.find('input').val();
        var dataLink = $sibling.find('option:contains("' + val + '")').data('link');
        console.log(dataLink);
        //location.href = dataLink;
      }, 500);
    }
  });
});
.awesomplete > ul {
	border-radius: .3em;
	margin: .2em 0 0;
	background: hsla(0,0%,100%,.9);
	background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
	border: 1px solid rgba(0,0,0,.3);
	box-shadow: .05em .2em .6em rgba(0,0,0,.2);
	text-shadow: none;
}

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

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

	.awesomplete > ul > li {
		position: relative;
		padding: .2em .5em;
		cursor: pointer;
	}
	
	.awesomplete > ul > li:hover {
		background: hsl(200, 40%, 80%);
		color: black;
	}
	
	.awesomplete > ul > li[aria-selected="true"] {
		background: hsl(205, 40%, 40%);
		color: white;
	}
	
		.awesomplete mark {
			background: hsl(65, 100%, 50%);
		}
		
		.awesomplete li:hover mark {
			background: hsl(68, 100%, 41%);
		}
		
		.awesomplete li[aria-selected="true"] mark {
			background: hsl(86, 100%, 21%);
			color: inherit;
		}
<input class="awesomplete dropdown-input" list="mylist" id="my-input" />
<datalist id="mylist">
	<option data-link="http://www.google.com">Ada</option>
	<option data-link="http://www.yahoo.com">Java</option>
	<option data-link="http://www.bing.com">JavaScript</option>
	<option data-link="http://www.yandex.com">Brainfuck</option>
	<option data-link="http://www.php.net">LOLCODE</option>
	<option data-link="http://www.asp.net">Node.js</option>
	<option data-link="http://www.microsoft.net">Ruby on Rails</option>
</datalist>


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

Upvotes: 1

Vinod Louis
Vinod Louis

Reputation: 4876

You can use awesomplete-selectcomplete like this

document.getElementById('my-input').addEventListener('awesomplete-selectcomplete',function(){
  alert(this.value); 
  //TODO HERE
});
.awesomplete > ul {
	border-radius: .3em;
	margin: .2em 0 0;
	background: hsla(0,0%,100%,.9);
	background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
	border: 1px solid rgba(0,0,0,.3);
	box-shadow: .05em .2em .6em rgba(0,0,0,.2);
	text-shadow: none;
}

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

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

	.awesomplete > ul > li {
		position: relative;
		padding: .2em .5em;
		cursor: pointer;
	}
	
	.awesomplete > ul > li:hover {
		background: hsl(200, 40%, 80%);
		color: black;
	}
	
	.awesomplete > ul > li[aria-selected="true"] {
		background: hsl(205, 40%, 40%);
		color: white;
	}
	
		.awesomplete mark {
			background: hsl(65, 100%, 50%);
		}
		
		.awesomplete li:hover mark {
			background: hsl(68, 100%, 41%);
		}
		
		.awesomplete li[aria-selected="true"] mark {
			background: hsl(86, 100%, 21%);
			color: inherit;
		}
<input class="awesomplete dropdown-input" list="mylist" id="my-input" />
<datalist id="mylist">
	<option data-link="http://www.google.com">Ada</option>
	<option data-link="http://www.yahoo.com">Java</option>
	<option data-link="http://www.bing.com">JavaScript</option>
	<option data-link="http://www.yandex.com">Brainfuck</option>
	<option data-link="http://www.php.net">LOLCODE</option>
	<option data-link="http://www.asp.net">Node.js</option>
	<option data-link="http://www.microsoft.net">Ruby on Rails</option>
</datalist>


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

Upvotes: 1

Related Questions