Это основано на bootstrap Плагин предложения поиска для компонента раскрывающегося меню «Кнопка» должен использоваться в компоненте раскрывающегося меню «Кнопка». Примерадрес:http://lzw.me/pages/demo/bootstrap-suggest-plugin/demo/ Исходный код плагина:https://github.com/veenter/bootstrap-suggest-plugin
1. Отключите подсказку: ("input#test").bsSuggest("disable"); 2. Включите подсказки: ("input#test").bsSuggest("destroy"); 4. Проверьте версию:
1、onDataRequestSuccess: когда AJAX Срабатывает при успешном запросе данных и возвращает результат второму параметру. 2、onSetSelectValue:когда Выберите из раскрывающегося менюценитьсрабатывает, когда,и передать заданные данные второмупараметр 3、onUnsetSelectValue:когданабор idField и срабатывает при свободном вводе контента (синхронизируется с цветным отображением фонового предупреждения). 4、onShowDropdown:отображение выпадающего менюсрабатывает, когда 5、onHideDropdown:Скрытый триггер раскрывающегося меню
1. Введение jQuery、bootstrap.min.css、bootstrap.min.js 2. Внедряем плагин js: bootstrap-suggest.min.js
<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>
//плагин начальной загрузка Загрузка скважин на основе личности пользователя
$("#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 = '';
});
//Получить номер нефтяной скважины на основе личности пользователя
@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;
}
Я не буду писать код для уровней Сервиса и Дао позже. Вы сможете увидеть его, когда увидите уровень Контроллера.
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.
https://blog.csdn.net/qq_43753724/article/details/114884133?spm=1001.2014.3001.5501