Bagaimana cara mengosongkan kotak pencarian dengan 'x' di bootstrap 3?

Mengalami masalah dengan bootstrap, jadi bantuan akan sangat membantu. Terima kasih

Yang saya mau: (bagian atas)

Kode saya saat ini:

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

Tangkapan Layar Saat Ini:

Untuk mendapatkan sesuatu seperti ini

dengan Bootstrap 3 dan Jquery gunakan kode HTML berikut:

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

dan beberapa CSS:

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

dan Javascript:

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

Tentu saja Anda harus menulis lebih banyak Javascript untuk fungsionalitas apa pun yang Anda butuhkan, misalnya menyembunyikan 'x' jika inputnya kosong, membuat permintaan Ajax, dan sebagainya. Lihat http://www.bootply.com/121508

Solusi HTML 5 super sederhana:

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

Sumber: Tutorial HTML 5 - Jenis Input: Pencarian

Itu berfungsi setidaknya di Chrome 8, Edge 14, IE 10, dan Safari 5 dan tidak memerlukan Bootstrap atau pustaka lainnya. (Sayangnya, tampaknya Firefox belum mendukung tombol hapus pencarian.)

Setelah mengetik di kotak pencarian, 'x' akan muncul yang dapat diklik untuk menghapus teks. Ini masih akan berfungsi sebagai kotak edit biasa (tanpa tombol 'x') di browser lain, seperti Firefox, jadi pengguna Firefox dapat memilih teks dan menekan delete, atau ...

Jika Anda benar-benar membutuhkan fitur bagus untuk dimiliki ini yang didukung di Firefox, maka Anda dapat menerapkan salah satu solusi lain yang diposting di sini sebagai polyfill untuk elemen input [type = search]. Polyfill adalah kode yang secara otomatis menambahkan fitur browser standar saat browser pengguna tidak mendukung fitur tersebut. Seiring waktu, harapannya adalah Anda dapat menghapus polyfill karena browser menerapkan fitur masing-masing. Dan bagaimanapun juga, implementasi polyfill dapat membantu menjaga kode HTML lebih bersih.

Omong-omong, jenis input HTML 5 lainnya (seperti "tanggal", "angka", "email", dll.) Juga akan diturunkan dengan baik ke kotak edit biasa. Beberapa browser mungkin memberi Anda alat pilih tanggal yang keren, kontrol pemintal dengan tombol atas / bawah, atau (pada ponsel) keyboard khusus yang menyertakan tanda '@' dan tombol '.com', tetapi setahu saya, semua browser akan setidaknya menunjukkan kotak teks biasa untuk semua jenis masukan yang belum diakui.

Solusi Bootstrap 3 & HTML 5

Bootstrap 3 me-reset banyak CSS dan merusak tombol batal pencarian HTML 5. Setelah CSS Bootstrap 3 dimuat, Anda dapat memulihkan tombol batal pencarian dengan CSS yang digunakan dalam contoh berikut:

<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>

Sumber: Input Pencarian HTML 5 Tidak Bekerja dengan Bootstrap

Saya telah menguji bahwa solusi ini berfungsi di versi terbaru Chrome, Edge, dan Internet Explorer. Saya tidak dapat menguji di Safari. Sayangnya, tombol 'x' untuk menghapus pencarian tidak muncul di Firefox, tetapi seperti di atas, polyfill dapat diterapkan untuk browser yang tidak mendukung fitur ini secara native (yaitu Firefox).

Saya mencoba menghindari terlalu banyak CSS khusus dan setelah membaca beberapa contoh lain saya menggabungkan ide-ide di sana dan mendapatkan solusi ini:

<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>

Karena saya tidak menggunakan JavaScript bootstrap, hanya CSS bersama dengan Angular, saya tidak perlu kelas has-clear dan form-control-clear, dan saya menerapkan fungsi clear di pengontrol AngularJS saya. Dengan JavaScript bootstrap ini mungkin bisa dilakukan tanpa JavaScript sendiri.

Terima kasih, tidak diinginkan, solusi Anda sangat bersih. Saya menggunakan formulir bootstrap horizontal dan membuat beberapa modifikasi untuk memungkinkan penangan tunggal dan bentuk css.

html: - DIPERBARUI untuk menggunakan has-feedback dan form-control-feedback Bootstrap

 <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();
});

contoh: http://www.bootply.com/130682

Jawaban AngularJS / UI-Bootstrap

• Gunakan kelas has-feedback Bootstrap untuk menampilkan ikon di dalam kolom input.
• Pastikan ikonnya memiliki style="cursor: pointer; pointer-events: all;"
• Gunakan ng-clickuntuk menghapus teks.

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 snippet)

      <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>

Berikut plunkernya: http://plnkr.co/edit/av9VFw?p=preview

Lakukan dengan gaya dan skrip sebaris:

<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>

Berikut adalah solusi kerja saya dengan ikon pencarian dan hapus untuk Angularjs \ Bootstrap dengan 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; 
}

Jangan mengikat ke id elemen, cukup gunakan elemen masukan 'sebelumnya' untuk menghapus.

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();
    });
});

Markup HTML, gunakan sebanyak yang Anda suka:

<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>

Tempatkan gambar (ikon batal) dengan posisi absolut, sesuaikan properti atas dan kiri, dan panggil event onclick metode yang membersihkan bidang input.

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

Dalam posisi css rentang yang sesuai,

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