Обязательный выбор значения в Autocomplete
Всем привет! С языком не знаком. Подскажите, пожалуйста, как правильно указать:
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> Спасибо! |
Бронислав,
учите язык и документацю на плагин <!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> |
А как сделать так, чтобы :
1) при переходе в другой input табом или нажатием мышки вне поля, автоматически выбиралось значение, которое было взято автофокусом из списка подсказок (пример: http://busfor.ru); 2) вместо модального окна выводился div с предупреждением под input`ом при нажатии на кнопку, если значение не было выбрано из списка (пример: ![]() 3) при активировании input'а вылезал список подсказок, каждый раз, когда его активируешь (пример: http://busfor.ru). Спасибо! |
Бронислав,
может быть в раздел работа ... |
... <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-скрипт. Спасибо! |
Бронислав,
if(availableTags.indexOf(from.value)==-1 || availableTags.indexOf(to.value)==-1) |
Часовой пояс GMT +3, время: 08:58. |