Autocomplete jquery doubts

Asked

Viewed 190 times

0

I have a script with autocomplete that I wanted that if the user typed a word that does not have in the script it would be redirected to a specific url for example warning.html, but I’m not able to do that, if you can help me already thank.

<!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>
<script src="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>

javascript jquery

1 answer

1


To test if it does not exist, it is better 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 the url.

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

   return false;
});

With the data.map the object array is mapped in an array only with the Labels and then with the indexOf whether the text is in that sub-array. When the indexOf return -1 indicates that the searched element does not exist.

Edit:

Applying on 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>
<script src="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>

  • Good evening Isac thanks for your return, I tried to use your tips but unfortunately I could not make it work, even I put a word that does not exist it just does no action.

  • In my code I assumed that the autocomplete field is inside a form with id formulario. Just as I also assumed that I would still be placed inside $(document).ready(function() {. Make sure you have it that way.

  • Actually I call the function so <input id="autocomplete" />

  • Show Dear Thank you so much... I broke my head trying to make it work...

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.