html5 datalist trigger event after option option is selected

Use input + datalist to realize the auto-completion function, where the content in the datalist is dynamically transformed according to the input content, the code is as follows

<!DOCTYPE HTML>
<html>
<body>
<script src="./jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script>
function inputSelect(){
	var input_select=$("#input").val();
	var option_length=$("option").length;
	var option_id='';
	for(var i=0;i<option_length;i++){
		var option_value=$("option").eq(i).attr('data-value');
		if(input_select==option_value){
			option_id=$("option").eq(i).attr('data-id');
			break;
		}
	}
	console.log(input_select,option_length,option_id);
};
</script>
<input list="cars"  id="input" onchange="inputSelect()"/>
<datalist id="cars">
	<option value="111" data-value="111"  data-id="1">
	<option value="122"  data-value="122" data-id="2">
	<option value="1222" data-value="1222" data-id="4">
</datalist>
</body>
</html>

Intelligent Recommendation

After selecting the mulptiple attribute in the selected option, the option can not be selected again after canceling the option.

First the code is like this Then I call to make all options selected each time the form is submitted But I have an operation that can delete redundant options. Then I found that the option has been se...

Implement the select option in the select to select the trigger event

Implement the select option in the select to select the trigger event Reprint When we use the drop-down list box select, we need to trigger the event on the selected option. In fact, there is no trigg...

Select the option to achieve select specified trigger event

In fact, the method itself is not a trigger event, we select only triggered in the onchange method in. reference:Select the option to achieve select specified trigger event...

VUE3 trigger component option (custom event)

Trigger component options (custom events) Event name The event name provides automatic case switching, used in subcomponentsHump nameMethod triggers an event, passing in the parent component-The for...

About Select option is selected by default and the option value remains after query

Give a name to the form and a name from your selection box, as shown below When the page loads, iterate through the option values in the select, and then set the selected value to selected="sel...