плагин начальной загрузки
плагин начальной загрузки

Каталог статей

один、бутстрап-предложение

Это основано на bootstrap Плагин предложения поиска для компонента раскрывающегося меню «Кнопка» должен использоваться в компоненте раскрывающегося меню «Кнопка». Примерадрес:http://lzw.me/pages/demo/bootstrap-suggest-plugin/demo/ Исходный код плагина:https://github.com/veenter/bootstrap-suggest-plugin

1.1 Описание функции

  • Метод поиска: запросите вхождение ключевого слова из действительных данных поля data.value или данные поля включены в ключевое слово.
  • Поддерживает предложения по входному поиску для отдельных ключевых слов и нескольких ключевых слов. Несколько ключевых слов можно настроить с помощью разделителей.
  • Поддерживает три способа поиска по данным массива данных: поиск по запросу URL-адреса и поиск по первому запросу данных URL-адреса и кэширование.
  • Одно ключевое слово установит два значения: идентификатор данных и содержимое поля ввода на основе данных indexId/idField и indexKey/idFiled. Несколько ключевых слов будут устанавливать только значение поля ввода;

1.2 Эффект достижения:

1.3 Вызов метода

1. Отключите подсказку: ("input#test").bsSuggest("disable"); 2. Включите подсказки: ("input#test").bsSuggest("destroy"); 4. Проверьте версию:

1.4 Мониторинг событий

1、onDataRequestSuccess: когда AJAX Срабатывает при успешном запросе данных и возвращает результат второму параметру. 2、onSetSelectValue:когда Выберите из раскрывающегося менюценитьсрабатывает, когда,и передать заданные данные второмупараметр 3、onUnsetSelectValue:когданабор idField и срабатывает при свободном вводе контента (синхронизируется с цветным отображением фонового предупреждения). 4、onShowDropdown:отображение выпадающего менюсрабатывает, когда 5、onHideDropdown:Скрытый триггер раскрывающегося меню

1.5 Полная реализация кода:

1. Введение jQuery、bootstrap.min.css、bootstrap.min.js 2. Внедряем плагин js: bootstrap-suggest.min.js

1.5.1 Код ключа внешнего интерфейса:

Язык кода:javascript
копировать
   <label class="col-sm-2 control-label">Номер скважины(Тестирование плагинов):</label>
                                <div class="col-sm-4 controls">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="wellId_test" name="wellInfo.wellId">
                                        <div class="input-group-btn">
                                            <button type="button" class="btn btn-white dropdown-toggle"
                                                    data-toggle="dropdown">
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                            </ul>
                                        </div>
                                    </div>
                                </div>

1.5.2 js-код:

Язык кода:javascript
копировать
//плагин начальной загрузка Загрузка скважин на основе личности пользователя
        $("#wellId_test").bsSuggest('init',{
          clearable:true,   //Можно ли очистить введенный контент
          url:"/opms/wellInfo/getAllWellId",
            showBtn:true,          //Отображать ли раскрывающуюся кнопку
            ignorecase:true,        //Когда интерфейс ищет совпадения, игнорируем регистр
            hideOnSelect:true,      //Когда щелкаем мышью, чтобы выбрать значение из списка, нужно ли скрывать список выбора
            listAlign:'auto',        //Позиция выравнивания списка подсказок, влево/вправо/авто
            idField:"wellId",           //Какое поле каждого набора данных используется как для data-id, с более высоким приоритетом, чем indexId Настройки (рекомендуется)
            keyField :"wellId",			//Какое поле каждого набора данных используется как для Содержимое поля ввода,Приоритет выше, чем indexKey Настройки (рекомендуется)
            effectiveFields: ["wellId","wellType","abandonWell"],// Действительные поля отображаются в списке середина, невалидные поля будут отфильтрованы, и все они действительны по умолчанию.
            effectiveFieldsAlias: {
              "wellId":"номер скважины",
              "wellType":"тип скважины",
              "abandonWell":"Стоит ли отказаться"
            },
        }).on("onSetSelectValue",function (e,keyword) {
            // alert($('#wellId_test').val());
            // $('#wellId_test').val(keyword.wellId);
            // wellId_add=keyword.wellId;
        }).on("onUnsetSelectValue",function (e) {
            // wellId_add = '';
        });

1.5.3 Уровень контроллера:

Язык кода:javascript
копировать
//Получить номер нефтяной скважины на основе личности пользователя
    @RequestMapping(value = "/getAllWellId",method = {RequestMethod.GET,RequestMethod.POST})
    @ResponseBody
    public Map<String,Object> getAllWellId(HttpServletRequest req, HttpServletResponse res)
        throws Exception{
        //Сначала извлекаем сохраненный объект пользователя из сеансасередина
        UserInfo ui= (UserInfo) req.getSession().getAttribute("USERINFO");
            //Получение информации о нефтяных скважинах на основе идентификационных данных. Администраторы могут просматривать все нефтяные скважины, а операторы могут просматривать только нефтяные скважины в своих рабочих зонах.
            List<WellInfo> wellInfos= wellInfoService.getAllOilWellByRoleId(ui);
/*            for(WellInfo wellInfo:wellInfos){
                System.out.println(wellInfo);
            }*/
            int count=0;
            if(wellInfos!=null&&wellInfos.size()>0){
                count=wellInfos.size();
            }
            //Создаем объект результата и сохраняем возвращенный результат
            Map<String,Object> result=new HashMap<>(2);
            result.put("count",count);
            result.put("value",wellInfos);
            return result;

        }

Я не буду писать код для уровней Сервиса и Дао позже. Вы сможете увидеть его, когда увидите уровень Контроллера.

Параметры конфигурации следующие:

Язык кода:javascript
копировать
var defaultOptions = {
    url: null,                      //запрашиваем данные URL адрес
    jsonp: null,                    //Установите имя этого параметра, чтобы включить функцию jsonp, в противном случае используйте структуру данных json
    data: {
        value: []
    },                              //Запрос используемых данных, обратите внимание на формат
    indexId: 0,                     //Количество данных в каждой группе данных используется в качестве поля ввода для ввода. data-id,настраиватьдля -1 и idField Если для пусто, это значение не будет установлено.
    indexKey: 0,                    //Количество данных в каждой группе данных используется в качестве поля ввода для ввода.содержание
    idField: '',                    //Какое поле каждого набора данных используется как для data-id, с более высоким приоритетом, чем indexId Настройки (рекомендуется)
    keyField: '',                   //Какое поле каждого набора данных используется как для Содержимое поля ввода,Приоритет выше, чем indexKey Настройки (рекомендуется)
 
    /* Поиск по теме */
    autoSelect: true,               // Следует ли автоматически выбирать значение при использовании клавиш со стрелками вверх/вниз на клавиатуре.
    allowNoKeyword: TRUE,           // Разрешить ли запрос данных без ключевых слов
    getDataMethod: 'firstByUrl',    // Способ получения данных, url: всегда запрашивать по url data: from; options.data Get; firstByUrl: сначала получить все данные из URL-адреса, а затем получить их из options.data.
    delayUntilKeyup: false,         // Как получить данные для firstByUrl , следует ли задерживать запрос данных до тех пор, пока не будет введен
    ignorecase: false,              // Игнорировать ли регистр при поиске совпадений во внешнем интерфейсе
    effectiveFields: [],            // Действительные поля отображаются в списке середина, невалидные поля будут отфильтрованы, и все они действительны по умолчанию.
    effectiveFieldsAlias: {},       // Объект-псевдоним для допустимых полей, используемый для header отображать
    searchFields: [],               // Допустимое поле поиска, используется при фильтрации данных из внешнего поиска, но не обязательно отображается в списке середина. эффективные поля Поля конфигурации также используются для фильтрации поиска.
    twoWayMatch: true,              // Следует ли искать двусторонние совпадения. для true То есть, если введенное ключевое слово содержит или включено в поле соответствия, для будет сопоставлено успешно. false Затем введите ключевое слово, включенное в поле соответствия, чтобы подтвердить, что для успешно соответствует.
    multiWord: false,               // Поддержка нескольких ключевых слов, разделенных разделителями
    separator: ',',                 // Разделитель, если поддерживается несколько ключевых слов, по умолчанию используется запятая половинной ширины.
    delay: 300,                     // Интервал задержки срабатывания поиска, в миллисекундах
    emptyTip: '',                   // Чтобы запросить содержимое, отображаемое, когда for пусто, вы можете html
    searchingTip: 'поисксередина...',       // ajax Содержимое подсказки, отображаемое во время поиска. Если время поиска длительное, будет предоставлено содержимое подсказки.
    hideOnSelect: false,            // Скрывать ли список выбора при щелчке мыши для выбора значения из списка
 
    /* UI */
    autoDropup: false,              //Выберите, будет ли меню автоматически определять, следует ли расширяться вверх. Пусть для true,Тогда высота раскрывающегося меню превышает форму,и Направление вверх не будет охватываться формой,Появится меню выбора
    autoMinWidth: false,            //Устанавливать ли автоматически минимальную ширину, установленную для false Тогда минимальная ширина не меньше ширины поля ввода.
    showHeader: false,              //Отображать ли список выбора header。для true Если допустимое поле превышает один столбец, будет отображаться заголовок.
    showBtn: true,                  //Отображать ли раскрывающуюся кнопку
    inputBgColor: '',               //Цвет фона поля ввода. Если он отличается от цвета фона контейнера, вам может потребоваться настроить этот элемент
    inputWarnColor: 'rgba(255,0,0,.1)', //Цвет предупреждения, когда содержимое поля ввода не выбрано из раскрывающегося списка
    listStyle: {
        'padding-top': 0,
        'max-height': '375px',
        'max-width': '800px',
        'overflow': 'auto',
        'width': 'auto',
        'transition': '0.3s',
        '-webkit-transition': '0.3s',
        '-moz-transition': '0.3s',
        '-o-transition': '0.3s'
    },                              //Управление стилем списка
    listAlign: 'left',              //Позиция выравнивания списка подсказок, влево/вправо/авто
    listHoverStyle: 'background: #07d; color:#fff', //Стиль списка подсказок при наведении курсора мыши
    listHoverCSS: 'jhover',         //Стиль списка подсказок при наведении курсора мышиимя
    clearable: false,               // Можно ли очистить введенный контент?
 
    /* key */
    keyLeft: 37,                    //Клавиша направления влево, разные операционные системы могут иметь различия, вы можете определить это самостоятельно
    keyUp: 38,                      // клавиша направления вверх
    keyRight: 39,                   //Клавиша со стрелкой вправо
    keyDown: 40,                    //Клавиша со стрелкой вниз
    keyEnter: 13,                   //Вводим ключ
 
    /* methods */
    fnProcessData: processData,     //Метод форматирования данных и возврата ссылки на формат данных data параметр
    fnGetData: getData,             //Метод получения данных, обычно настройка не требуется, если нет особых требований
    fnAdjustAjaxParam: null,        //Корректирование ajax проситьпараметрметод,Для получения дополнительной информации о необходимости настройки запроса。Например, если ключевое слово запроса измененоодинпоэтапная обработка、Изменить тайм-аут и т. д.
    fnPreprocessKeyword: null       //Перед поиском и фильтрацией данных дополнительно обработайте входные ключевые слова. Обратите внимание, что строка должна быть возвращена
};

Совет: при начальной загрузке версии 4, когда параметр «clearable» равен true, должна быть представлена ​​библиотека значков с потрясающими шрифтами. Кнопка «Очистить» использует значок fa-plus.

Решение ошибки при использовании bootstrap-suggest:

https://blog.csdn.net/qq_43753724/article/details/114884133?spm=1001.2014.3001.5501

boy illustration
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
boy illustration
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
boy illustration
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
boy illustration
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
boy illustration
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
boy illustration
Идеальная интеграция Cursor и DeepSeek API
boy illustration
DeepSeek V3 снижает затраты на обучение больших моделей
boy illustration
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
boy illustration
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
boy illustration
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
boy illustration
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
boy illustration
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
boy illustration
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
boy illustration
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
boy illustration
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
boy illustration
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
boy illustration
Cloud Native|Практика: установка Dashbaord для K8s, графика неплохая
boy illustration
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
boy illustration
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
boy illustration
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
boy illustration
Центр конфигурации————Накос
boy illustration
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
boy illustration
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
boy illustration
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
boy illustration
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
boy illustration
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
boy illustration
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
boy illustration
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
boy illustration
[Зона легкого облачного игрового сервера] Управление игровыми архивами
boy illustration
Развертывание SpringCloud-проекта на базе Docker и Docker-Compose