Форум

Бронислав · #1 (**permalink**) 30.09.2017, 19:01

Всем привет! С языком не знаком. Подскажите, пожалуйста, как правильно указать:
1) обязательность выбора значения из списка подсказок, а если выбор не был сделан, чтобы выводилось сообщение (я так понимаю, с помощью проверки события change?);
2) ограничить количество выводимых подсказок;
3) подсказки выводятся по мере ввода букв (последовательно), а не по совпадению в любом месте в слове.
Шапка:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#from" ).autocomplete({
      source: availableTags
    });
    $( "#to" ).autocomplete({
      source: availableTags
    });
	} );
  </script>

<form action="'. $act .'" method="post" name="form">
<div class="table_form">
<div class="table_form_td"><input class="table_form_input" name="from" type="text" required placeholder="Откуда" id="from"/>
<div class="table_form_td"><input class="table_form_input" name="to" type="text" required placeholder="Куда" id="to" /></div>
<div class="table_form_td"><input class="table_form_input_button" type="submit" value="Найти билеты" /></div>
</div>

Спасибо!

рони · #2 (**permalink**) 30.09.2017, 19:56

Бронислав,
учите язык и документацю на плагин

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.css"/>
    <style>
        #search-query {
            width:300px;
            padding:5px 10px;
            margin-left:10px;
        }
        /****** jQuery Autocomplete CSS *************/
        .ui-corner-all {
            -moz-border-radius: 0;
            -webkit-border-radius: 0;
            border-radius: 0;
        }
        .ui-menu {
            border: 1px solid lightgray;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 15px;
            background-color: white;
        }
        .ui-menu .ui-menu-item a {
            color: #888;
            display: block;
        }

        .ui-menu .ui-menu-item a:hover {
            border: 1px solid lightgray;
        }
        .ui-menu .ui-menu-item:hover {
            display: block;
            text-decoration: none;
            color: #3D3D3D;
            cursor: pointer;
            background-color: lightgray;
            background-image: none;
            border:0;
        }
        .ui-widget-content .ui-state-hover, .ui-widget-content .ui-state-focus {
            border: 1px solid lightgray;
            background-image: none;
            background-color: lightgray;
            font-weight: bold;
            color: #3D3D3D;
        }
    </style>
</head>
<body>
<label>Search:</label>
<input id="search-query" type="text" />

<script>
var $_searchQuery = $("#search-query");
var availableTags = [
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

var err = "";
$_searchQuery.autocomplete({
    close: function(event, ui) {if(availableTags.indexOf(this.value)==-1) err = "поле Откуда обязательно к заполнению"},
    open : function(event, ui) {err = ""},
    source: function(request, response) {
      var max = 2;
      var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
      response(availableTags.filter(function(item) {
      return  matcher.test( item );
}).splice(0,max))
    }
});
$_searchQuery.on("blur", function() {
err && alert(err)
})
</script>
</body>
</html>

Бронислав · #3 (**permalink**) 02.10.2017, 23:31

А как сделать так, чтобы :
1) при переходе в другой input табом или нажатием мышки вне поля, автоматически выбиралось значение, которое было взято автофокусом из списка подсказок (пример: http://busfor.ru);
2) вместо модального окна выводился div с предупреждением под input`ом при нажатии на кнопку, если значение не было выбрано из списка (пример:

);
3) при активировании input'а вылезал список подсказок, каждый раз, когда его активируешь (пример: http://busfor.ru).
Спасибо!

рони · #4 (**permalink**) 02.10.2017, 23:36

Бронислав,
может быть в раздел работа ...

Бронислав · #5 (**permalink**) 10.10.2017, 02:06

...
<input class="table_form_input_button" type="submit"  value="Знайти квитки"  id="find" />
...
<script>
var $_searchQuery = $("#from");
var availableTags = [
      "AppleScript",
	  "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

$_searchQuery.autocomplete({
	autoFocus: true,
	source: function(request, response) {
      var max = 7;
      var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
      response(availableTags.filter(function(item) {
      return  matcher.test( item );
}).splice(0,max))
    }
});

$_searchQuery.on("blur", function() {if(availableTags.indexOf(this.value)==-1)
$(".table_form_error").css("display","block")
  else
	$(".table_form_error").css("display","none");
});

var $_searchQuery1 = $("#to");
$_searchQuery1.autocomplete({
	autoFocus: true,
	source: function(request, response) {
      var max = 7;
      var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
      response(availableTags.filter(function(item) {
      return  matcher.test( item );
}).splice(0,max))
    }
});

$_searchQuery1.on("blur", function() {if(availableTags.indexOf(this.value)==-1)
$(".table_form_error1").css("display","block")
   else
	$(".table_form_error1").css("display","none");
});

var $buy = $("#find");
$buy.click(function ()
{if(availableTags.indexOf(from.value)==-1)
	$(".table_form_error").css("display","block")
else
       return false    	
});

$buy.click(function ()
{if(availableTags.indexOf(to.value)==-1)
	$(".table_form_error1").css("display","block")
else
       return false
 });
$buy.click(function ()                                                                //<<<<<
{if(availableTags.indexOf(from.value && to.value)==-1)
	return false
});
</script>

Подскажите, пожалуйста, как разобраться с кнопкой (последнее условие), чтобы нормально срабатывало условие "если значение из from и из to не попадает в массив, то ничего не делаем (отображаются ошибки виджета), а если и то и то значение из массива, то скрипт заканчивает работу и дальше его обрабатывает php-скрипт.
Спасибо!

рони · #6 (**permalink**) 10.10.2017, 02:46

Бронислав,

if(availableTags.indexOf(from.value)==-1 || availableTags.indexOf(to.value)==-1)

Форум

Справочник

Discord чат

Курсы javascript