Асинхронное получение данных из textInput

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
andrej3337
Сообщения: 46
Зарегистрирован: 2019.11.03, 16:02

Re: Асинхронное получение данных из textInput

Сообщение andrej3337 »

unknownby писал(а): 2020.09.23, 13:05 При помощи curl реализовалось легко, без косяков с передачей заголовков.
Во вьюхе, есть текстовое поле с айди my_input
Этим же способом не реализовать "живой поиск" или там по каждому введенному символу подтягивает все релевантные данные?

Я использовал виджет https://github.com/anmaslov/yii2-autocomplete-widget
Поиск производится по наименованию после 3 символа и запросы идут при введении каждого символа. В выпадающем списке появляется 5 вариантов. Возможностей курла я не знаю, но в моем представлении (в мыслях в смысле) такое возможно только с использованием асинхронных аякс запросов.

Ну, на сегодняшний день в черновом варианте основа уже реализована, там еще с логикой поработать выборки нужно и хотелось бы добавить вариант одновременного поиска и по наименованию, и по УНП как это реализовано https://legat.by
unknownby
Сообщения: 749
Зарегистрирован: 2019.11.05, 16:34
Контактная информация:

Re: Асинхронное получение данных из textInput

Сообщение unknownby »

andrej3337 писал(а): 2020.09.23, 14:57 Этим же способом не реализовать "живой поиск" или там по каждому введенному символу подтягивает все релевантные данные?

Я использовал виджет https://github.com/anmaslov/yii2-autocomplete-widget
Поиск производится по наименованию после 3 символа и запросы идут при введении каждого символа. В выпадающем списке появляется 5 вариантов. Возможностей курла я не знаю, но в моем представлении (в мыслях в смысле) такое возможно только с использованием асинхронных аякс запросов.

Ну, на сегодняшний день в черновом варианте основа уже реализована, там еще с логикой поработать выборки нужно и хотелось бы добавить вариант одновременного поиска и по наименованию, и по УНП как это реализовано https://legat.by
Данный вариант работает вот как
1. При введении любого символа, на это реагирует on('input'), срабатывает ajax
2. ajax каждый раз отправляет запрос на контроллер
3. каждый раз curl соединяется по URL, который получается в итоге
4. каждый раз выводит информацию, если она пришла
5. если информация не пришла, ничего не выводит, т.к. возвращает false.

Для того, чтобы искало по разным из одного поля можно попробовать сделать проверку на то, что пришло и подставлять в URL или по УНП или по наименованию. Но ощущение, что у этого сайта есть выгруженная база и реализован виджет выпадающего списка у них, а не прямой выбор данных из EGR

P.S.
Из-за того, что поиск по УНП по API подразумевает, что ввести нужно целый УНП, то не будет никакого выпадающего списка, а только данные под конкретный УНП. В варианте легат.бай у них всё же поиск идет в базе данных.
andrej3337
Сообщения: 46
Зарегистрирован: 2019.11.03, 16:02

Re: Асинхронное получение данных из textInput

Сообщение andrej3337 »

Остановился на следующем варианте, может кому пригодится.
1. Установил на свой сервер прокси для заголовков cors https://github.com/caltechlibrary/corsp ... /README.md
Самое тут важное - это разобраться с файерволом, нужно открыть порт и разрешить через него запросы.
2. Используя виджет AutoComplete добавляем поле в форму.

Код: Выделить всё

                        <?= $form->field($model, 'k1', ['enableLabel' => false])->widget(AutoComplete::className(), [
                            'clientOptions' => [
                                'autoFill'=>true,
                                'minLength'=>'3', //после ввода 3 символов начинают отправляться запросы
                                'showAnim' => 'fold',
                                'source' => new JsExpression('
                                function (request, response) {
                                $.ajax({
                                url: "https://тут.мой.прокси:порт/egr.gov.by/api/v2/egr/getShortInfoByRegName/"+request.term,
                                dataType: "json",
                                success: function(data) {
                                $("#zachetform-k1 li").filter(function() {//тут вроде бесполезный фильтр для моих задач поиска по словам, пока оставил
                                $(this).toggle($(this).text().toLowerCase().indexOf(data) > -1)
                                });
                                response($.map(data.splice(0, 10), function (rt) {//тут ограничил выпадающий список 10 вариантами
                                for (var i = 0; i < 10; i++) {
                                if (rt.vfio != null||rt.vn != null) {return {label: rt.i, value: rt.vfio||rt.vn}}//а здесь пришлось поизголяться ,т.к. не во всех 
                                else if (rt.vfio == null||rt.vn == null) {return {label: rt.i, value: rt.vfn||rt.vnaim}} //компаниях есть значения vn и  vfio, чтобы не возвращало пустых строк         
                                }
                                }));
                                },
                                error: function () {
                                response([]);
                                }
                                });
                                }
                            '),
                                'select' => new JsExpression('
                            function (event, ui) {
                            this.value = ui.item.label;
                            $("#zachetform-k1").val(ui.item.value);
                            event.preventDefault();
                            }
                            '),
                            ],
                            'options' => [
                                'placeholder' => '1-й контрагент', 'class' => 'form-control form-control-lg', 'id' => 'zachetform-k1'
                            ]
                        ]) ?>
Еще столкнулся с небольшой проблемой отсутствия валидации для этого поля на клиенте. Решил заменой 'id' => 'k1' на 'id' => 'zachetform-k1' из исходного кода как сгенерировал yii2. Спасибо, unknownby, за активную помощь!
Ответить