Как очистить поле поиска с помощью символа «x» в начальной загрузке 3?

Возникли проблемы с загрузкой, так что некоторая помощь будет потрясающей. Благодарность

Что бы я хотел: (верхняя часть)

Мой текущий код:

<div class="form-group">
    <input type="text" 
           class="form-control" 
           id="findJobTitle" 
           name="findJobTitle" 
           placeholder="Job Title, Keywords" 
           onkeyup="showResult()"> 
</div>

Текущий снимок экрана:

Чтобы получить что-то вроде этого

с Bootstrap 3 и Jquery используйте следующий HTML-код:

<div class="btn-group">
  <input id="searchinput" type="search" class="form-control">
  <span id="searchclear" class="glyphicon glyphicon-remove-circle"></span>
</div>

и немного CSS:

#searchinput {
    width: 200px;
}
#searchclear {
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;
}

и Javascript:

$("#searchclear").click(function(){
    $("#searchinput").val('');
});

Конечно, вам нужно написать больше Javascript для любых функций, которые вам нужны, например, чтобы скрыть 'x', если вход пуст, делать запросы Ajax и так далее. См. Http://www.bootply.com/121508.

Супер-простое решение HTML 5:

<input type="search" placeholder="Search..." />

Источник: Учебное пособие по HTML 5 - Тип ввода: Поиск

Это работает как минимум в Chrome 8, Edge 14, IE 10 и Safari 5 и не требует Bootstrap или какой-либо другой библиотеки. (К сожалению, похоже, что Firefox еще не поддерживает кнопку очистки поиска.)

После ввода в поле поиска появится значок «x», который можно щелкнуть, чтобы очистить текст. Это по-прежнему будет работать как обычное поле редактирования (без кнопки 'x') в других браузерах, таких как Firefox, поэтому пользователи Firefox могут вместо этого выбрать текст и нажать удалить или ...

Если вам действительно нужна эта удобная функция, поддерживаемая в Firefox, вы можете реализовать одно из других решений, опубликованных здесь, как полифил для элементов input [type = search]. Полифилл - это код, который автоматически добавляет стандартную функцию браузера, когда браузер пользователя не поддерживает эту функцию. Есть надежда, что со временем вы сможете удалить полифиллы по мере того, как браузеры реализуют соответствующие функции. И в любом случае реализация полифила может помочь сохранить чистоту кода HTML.

Кстати, другие типы ввода HTML 5 (такие как «дата», «число», «электронная почта» и т. Д.) Также будут постепенно преобразовываться в простое поле редактирования. Некоторые браузеры могут предоставить вам причудливое средство выбора даты, элемент управления счетчиком с кнопками вверх / вниз или (на мобильных телефонах) специальную клавиатуру, которая включает знак '@' и кнопку '.com', но, насколько мне известно, все браузеры будет по крайней мере показать простое текстовое поле для любого неизвестного типа входного сигнала.

Решение Bootstrap 3 и HTML 5

Bootstrap 3 сбрасывает большую часть CSS и нарушает работу кнопки отмены поиска HTML 5. После загрузки CSS Bootstrap 3 вы можете восстановить кнопку отмены поиска с помощью CSS, используемого в следующем примере:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
  }
</style>
<div class="form-inline">
  <input type="search" placeholder="Search..." class="form-control" />
</div>

Источник: HTML 5 Search Input не работает с Bootstrap

Я проверил, что это решение работает в последних версиях Chrome, Edge и Internet Explorer. Я не могу тестировать в Safari. К сожалению, кнопка «x» для очистки результатов поиска не отображается в Firefox, но, как указано выше, для браузеров, которые не поддерживают эту функцию изначально (например, Firefox), можно реализовать полифил.

Я пытался избежать слишком большого количества пользовательского CSS, и после прочтения некоторых других примеров я объединил там идеи и получил следующее решение:

<div class="form-group has-feedback has-clear">
    <input type="text" class="form-control" ng-model="ctrl.searchService.searchTerm" ng-change="ctrl.search()" placeholder="Suche"/>
    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" ng-click="ctrl.clearSearch()" style="pointer-events: auto; text-decoration: none;cursor: pointer;"></a>
</div>

Поскольку я не использую загрузочный JavaScript, а только CSS вместе с Angular, мне не нужны классы has-clear и form-control-clear, и я реализовал функцию clear в своем контроллере AngularJS. С загрузочным JavaScript это возможно без собственного JavaScript.

Благодаря UnWired ваше решение было очень чисто. Я использовал горизонтальные формы начальной загрузки и сделал несколько модификаций, чтобы учесть один обработчик и сформировать CSS.

html: - ОБНОВЛЕНО для использования в Bootstrap has-feedback и form-control-feedback.

 <div class="container">
  <form class="form-horizontal">
   <div class="form-group has-feedback">
    <label for="txt1" class="col-sm-2 control-label">Label 1</label>
    <div class="col-sm-10">
     <input id="txt1" type="text" class="form-control hasclear" placeholder="Textbox 1">
     <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
    </div>
   </div>
   <div class="form-group has-feedback">
    <label for="txt2" class="col-sm-2 control-label">Label 2</label>
    <div class="col-sm-10">
      <input id="txt2" type="text" class="form-control hasclear" placeholder="Textbox 2">
      <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
    </div>
   </div>
   <div class="form-group has-feedback">
    <label for="txt3" class="col-sm-2 control-label">Label 3</label>
    <div class="col-sm-10">
     <input id="txt3" type="text" class="form-control hasclear" placeholder="Textbox 3">
     <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
    </div>   
   </div>
  </form>
 </div>

javascript:

$(".hasclear").keyup(function () {
    var t = $(this);
    t.next('span').toggle(Boolean(t.val()));
});
$(".clearer").hide($(this).prev('input').val());
$(".clearer").click(function () {
    $(this).prev('input').val('').focus();
    $(this).hide();
});

пример: http://www.bootply.com/130682

Ответ AngularJS / UI-Bootstrap

• Используйте класс has-feedback Bootstrap для отображения значка внутри поля ввода.
• Убедитесь, что на значке style="cursor: pointer; pointer-events: all;"
• Используйте, ng-clickчтобы очистить текст.

JavaScript (app.js)

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {

  $scope.params = {};

  $scope.clearText = function() {
    $scope.params.text = null;
  }

});

HTML (фрагмент index.html)

      <div class="form-group has-feedback">
        <label>text box</label>
        <input type="text"
               ng-model="params.text"
               class="form-control"
               placeholder="type something here...">
        <span ng-if="params.text"
              ng-click="clearText()"
              class="glyphicon glyphicon-remove form-control-feedback" 
              style="cursor: pointer; pointer-events: all;"
              uib-tooltip="clear">
        </span>
      </div>

Вот плункер: http://plnkr.co/edit/av9VFw?p=preview

Сделайте это с помощью встроенных стилей и скрипта:

<div class="btn-group has-feedback has-clear">
    <input id="searchinput" type="search" class="form-control" style="width:200px;">
        <a 
id="searchclear" 
class="glyphicon glyphicon-remove-circle form-control-feedback form-control-clear" 
style="pointer-events:auto; text-decoration:none; cursor:pointer;"
onclick="$(this).prev('input').val('');return false;">
</a>
</div>

Вот мое рабочее решение с поиском и очисткой значка для Angularjs \ Bootstrap с CSS.

    <div class="form-group has-feedback has-clear">
                    <input type="search" class="form-control removeXicon" ng-model="filter" style="max-width:100%" placeholder="Search..." />
                    <div ng-switch on="!!filter">
                        <div ng-switch-when="false">
                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                        </div>
                        <div ng-switch-when="true">
                            <span class="glyphicon glyphicon-remove-sign form-control-feedback" ng-click="$parent.filter = ''" style="pointer-events: auto; text-decoration: none;cursor: pointer;"></span>
                        </div>
                    </div>                        
                </div>

------

CSS

/* hide the built-in IE10+ clear field icon */
.removeXicon::-ms-clear {
  display: none;
}

/* hide the built-in chrome clear field icon */
.removeXicon::-webkit-search-decoration,
.removeXicon::-webkit-search-cancel-button,
.removeXicon::-webkit-search-results-button,
.removeXicon::-webkit-search-results-decoration { 
      display: none; 
}

Не привязывайтесь к идентификатору элемента, просто используйте «предыдущий» элемент ввода для очистки.

CSS:

.clear-input > span {
    position: absolute;
    right: 24px;
    top: 10px;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #AAA;
}

Javascript:

function $(document).ready(function() {
    $(".clear-input>span").click(function(){
        // Clear the input field before this clear button
        // and give it focus.

        $(this).prev().val('').focus();
    });
});

Разметка HTML, используйте сколько угодно:

<div class="clear-input">
    Pizza: <input type="text" class="form-control">
    <span class="glyphicon glyphicon-remove-circle"></span>
</div>

<div class="clear-input">
    Pasta: <input type="text" class="form-control">
    <span class="glyphicon glyphicon-remove-circle"></span>
</div>

Поместите изображение (значок отмены) с абсолютной позицией, настройте свойства top и left и вызовите метод onclick, который очищает поле ввода.

<div class="form-control">
    <input type="text" id="inputField" />
</div>
<span id="iconSpan"><img src="icon.png" onclick="clearInputField()"/></span>

В css расположите диапазон соответственно,

#iconSpan {
 position : absolute;
 top:1%;
 left :14%;
}