Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Add a <code>type="search"</code> to your input<br> The support is pretty decent but will <strong>not work in IE&lt;10</strong></p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="search"&gt;</code></pre> </div> </div> <hr></p> <h3>Clearable input for old browsers</h3> <p>If you need <strong>IE9 support</strong> here are some workarounds </p> <h2>Using a standard <code>&lt;input type="text"&gt;</code> and some HTML elements:</h2> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>/** * Clearable text inputs */ $(".clearable").each(function() { var $inp = $(this).find("input:text"), $cle = $(this).find(".clearable__clear"); $inp.on("input", function(){ $cle.toggle(!!this.value); }); $cle.on("touchstart click", function(e) { e.preventDefault(); $inp.val("").trigger("input"); }); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Clearable text inputs */ .clearable{ position: relative; display: inline-block; } .clearable input[type=text]{ padding-right: 24px; width: 100%; box-sizing: border-box; } .clearable__clear{ display: none; position: absolute; right:0; top:0; padding: 0 8px; font-style: normal; font-size: 1.2em; user-select: none; cursor: pointer; } .clearable input::-ms-clear { /* Remove IE default X */ display: none; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="clearable"&gt; &lt;input type="text" name="" value="" placeholder=""&gt; &lt;i class="clearable__clear"&gt;&amp;times;&lt;/i&gt; &lt;/span&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre> </div> </div> </p> <h2>Using only a <code>&lt;input class="clearable" type="text"&gt;</code> (No additional elements)</h2> <p><img src="https://i.stack.imgur.com/mwIK2.jpg" alt="Clear icon inside input element"></p> <p>set a <code>class="clearable"</code> and play with it's background image:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>/** * Clearable text inputs */ function tog(v){return v?'addClass':'removeClass';} $(document).on('input', '.clearable', function(){ $(this)[tog(this.value)]('x'); }).on('mousemove', '.x', function( e ){ $(this)[tog(this.offsetWidth-18 &lt; e.clientX-this.getBoundingClientRect().left)]('onX'); }).on('touchstart click', '.onX', function( ev ){ ev.preventDefault(); $(this).removeClass('x onX').val('').change(); }); // $('.clearable').trigger("input"); // Uncomment the line above if you pre-fill values from LS or server</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Clearable text inputs */ .clearable{ background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center; border: 1px solid #999; padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */ border-radius: 3px; transition: background 0.4s; } .clearable.x { background-position: right 5px center; } /* (jQ) Show icon */ .clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */ .clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input class="clearable" type="text" name="" value="" placeholder="" /&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre> </div> </div> </p> <p><strong><a href="http://jsbin.com/bebug/11/edit?html,css,js,output" rel="noreferrer">jsBin demo</a></strong></p> <p>The trick is to set some right padding (I used 18px) to the <code>input</code> and push the background-image right, out of sight (I used <code>right -10px center</code>).<br> That 18px padding will prevent the text hide underneath the icon (while visible).<br> jQ will add the class <code>x</code> (if <code>input</code> has value) showing the clear icon.<br> Now all we need is to target with jQ the inputs with class <code>x</code> and detect on <code>mousemove</code> if the mouse is inside that 18px "x" area; if inside, add the class <code>onX</code>.<br> Clicking the <code>onX</code> class removes all classes, resets the input value and hides the icon.</p> <hr> <p>7x7px gif: <img src="https://i.stack.imgur.com/mJotv.gif" alt="Clear icon 7x7"></p> <p>Base64 string:</p> <pre><code>data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs= </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POClear icon inside input text
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USRoko C. Buljan
    1. USRoko C. Buljan
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POClear icon inside input text
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COI took the liberty of borrowing some of the ideas in this code to make a tag cloud generator (with pure css tags and upvote and downvote buttons). I hope it looks ok in your browser; check it out at http://jsfiddle.net/7PnKS/
      singulars
      1. PO
      1. USmrBorna
    2. COwhich to be displayed when the input not empty either after submit without focus on
      singulars
      1. PO
      1. USkhaled_webdev
    3. CO@roXon that's a nice example, but unfortunately it's going to cause a blur event as soon as one clicks the "X". And often times, blur events are handling input validations. I guess I'd have to stop that in the click function?
      singulars
      1. PO
      1. UStim
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload