Autocomplete jquery doubt

Navigation
0

I have a script with autocomplete that I wanted if the user typed a word that does not have in the script it was redirected to a specific url for example warning.html, but I am not able to do this, if you can help me from now thank you . 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><scriptsrc="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
	$(document).ready(function() {
		var data = [
			{label: 'Google', value: 'http://google.com'},
			{label: 'Yahoo', value: 'http://yahoo.com'},
			{label: 'BMW', value: 'http://bmw.com'},
			{label: 'Bing', value: 'http://bing.com'}
		];
		
    	$("input#autocomplete").autocomplete({
			source: data,
			focus: function (event, ui) {
				$(event.target).val(ui.item.label);
				return false;
			},
			select: function (event, ui) {
				$(event.target).val(ui.item.label);
				window.location = ui.item.value;
				return false;
			}
		});
  	});
  </script>
</head>
<body>
<input id="autocomplete" />
</body>
</html>
    
asked by anonymous 05.07.2017 / 01:23

1 answer

0

To test if it does not exist is best when the user submits the form with Enter. In this case it is tested if the value that the user entered is in the data array and if it is not, url is changed. 

$("#formulario").submit(function(){
   if (data.map(x=>x.label).indexOf($("#autocomplete").val()) == -1){
       window.location.href = "aviso.html";
   }

   return false;
});

With data.map map the array of objects into an array only with the labels and then with indexOf to know if the text is in that sub-array. When indexOf returns -1 indicates that the searched element does not exist.

Edit :

Applying to the existing page: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><scriptsrc="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
    $(document).ready(function() {
        var data = [
            {label: 'Google', value: 'http://google.com'},
            {label: 'Yahoo', value: 'http://yahoo.com'},
            {label: 'BMW', value: 'http://bmw.com'},
            {label: 'Bing', value: 'http://bing.com'}
        ];

        $("input#autocomplete").autocomplete({
            source: data,
            focus: function (event, ui) {
                $(event.target).val(ui.item.label);
                return false;
            },
            select: function (event, ui) {
                $(event.target).val(ui.item.label);
                window.location = ui.item.value;
                return false;
            }
        });

        //nova função aqui
        $("#formulario").submit(function(){
            if (data.map(x=>x.label).indexOf($("#autocomplete").val()) == -1){
                window.location.href = "aviso.html";
            }

            return false;
        });
    });
  </script>
</head>
<body>
<form id="formulario"><!--Tem agora de ter aqui o formulario para se poder submeter-->
     <input id="autocomplete" />
<form>
</body>
</html>
    
05.07.2017 / 02:54
MX7 Data Collector Shared installation Android Studio