javascript - Expand and show textbox on icon click

I am looking to mimic this functionality : ,output

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Geocoding Map</title>
    <meta charset="utf-8">
      <link rel="stylesheet" href=".css">
      <script src=".min.js"></script>
    <style>
      #map {
        height: 100%;
        width: 100%;
        position: absolute;
      }
    html,body{margin: 0; padding: 0}
  </style>
  </head>
  <body>
    <div id='map'></div>
    <script>
      // Set the global API key
      L.Mapzen.apiKey = "your-mapzen-api-key";

      // Add a map to the #map div
      // Center on the Pigott building at Seattle University
      var map = L.Mapzen.map("map", {
        center: [47.61033,-122.31801],
        zoom: 16,
      });

      // Disable autoplete and set parameters for the search query
      var geocoderOptions = {
        autoplete: false,
        params: {
          sources: 'osm',
          'boundary.country': 'USA',
          layers: 'address,venue'
        }
      };

      // Add the geocoder to the map, set parameters for geocoder options
      var geocoder = L.Mapzen.geocoder(geocoderOptions);
      geocoder.addTo(map);

    </script>
  </body>
</html>

I attempted to deconstruct the javascript being used to do it but its a 500+ line plicated object with probably more functionality than I need.

I have access to jQuery and jQuery UI. What is the approach I should start with?

I know that it has a focus event where if you focus off the text box it will go back to the minimized state.

I am open to demo/ideas people have seen very similarity functionality so I can use it as reference.

I am looking to mimic this functionality : http://jsbin./cirafujinu/edit?html,output

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Geocoding Map</title>
    <meta charset="utf-8">
      <link rel="stylesheet" href="https://mapzen./js/mapzen.css">
      <script src="https://mapzen./js/mapzen.min.js"></script>
    <style>
      #map {
        height: 100%;
        width: 100%;
        position: absolute;
      }
    html,body{margin: 0; padding: 0}
  </style>
  </head>
  <body>
    <div id='map'></div>
    <script>
      // Set the global API key
      L.Mapzen.apiKey = "your-mapzen-api-key";

      // Add a map to the #map div
      // Center on the Pigott building at Seattle University
      var map = L.Mapzen.map("map", {
        center: [47.61033,-122.31801],
        zoom: 16,
      });

      // Disable autoplete and set parameters for the search query
      var geocoderOptions = {
        autoplete: false,
        params: {
          sources: 'osm',
          'boundary.country': 'USA',
          layers: 'address,venue'
        }
      };

      // Add the geocoder to the map, set parameters for geocoder options
      var geocoder = L.Mapzen.geocoder(geocoderOptions);
      geocoder.addTo(map);

    </script>
  </body>
</html>

I attempted to deconstruct the javascript being used to do it but its a 500+ line plicated object with probably more functionality than I need.

I have access to jQuery and jQuery UI. What is the approach I should start with?

I know that it has a focus event where if you focus off the text box it will go back to the minimized state.

I am open to demo/ideas people have seen very similarity functionality so I can use it as reference.

Share Improve this question asked May 30, 2017 at 18:39 CuriousDeveloper 8992 gold badges8 silver badges31 bronze badges

You can do it using CSS transition and toggling classes on click. – apires Commented May 30, 2017 at 18:42

Add a ment |

3 Answers 3

Sorted by: Reset to default 8

CSS-only

you could do it using a couple of elements,

a <label> wrapper to help registering the :fucus state
an <input> element with border styles etc, and left padding to acodate the icon
an <i> icon element (placed after the input)
Target using :focus and use the next sibling + to target the icon when the input is focused:

tl;dr

.expandSearch{
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.expandSearch i{
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 4px 8px 8px ;
  color: #777;
  cursor: pointer;
  user-select: none;
  transition: 0.24s;
}
.expandSearch i:hover{
  color: #0bf;
}
.expandSearch input{
  border:none;
  background: transparent;
  font:14px/1.4 sans-serif;
  padding-left: 26px;
  background:#fff;
  border: 2px solid #ddd;
  border-radius: 4px;
  transition: 0.24s;
  width: 0px;
  padding: 8px 0px 8px 34px;
}
.expandSearch input:focus{
  border-color: #aaa;
  outline: none;
  width:200px;
  padding: 8px 12px 8px 34px;
  border-color: #0bf;
}
.expandSearch input:focus + i{
  /*padding: 8px 4px 8px 8px ;*/
  color: #ddd;
  pointer-events: none;
}

<link href="https://fonts.googleapis./icon?family=Material+Icons" rel="stylesheet">

<label class="expandSearch">
  <input type="text" placeholder="Search..." name="search">
  <i class="material-icons">search</i>
</label>

Basically you have to listen for a click on the icon, and then enlarge the box with jQuery UI

 $("#icon").on("click",function(){
      animate();
 })

 function animate(){
      //many ways to do the animation, one way would be to addClass
      $("#icon").addClass("large", 500)

      //Or you can hide an input field inside the icon and just animate that
      $("#input").show()
 }

Here is another example making use of both jQuery UI (Button & Autoplete) and CSS. I've been growing more in my use of Font Awesome too.

HTML

<div class="ui-widget ui-widget-content ui-corner-all collapsed item-wrapper">
  <form id="search-form">
    <a href="#" class="btn" title="Begin Search"><i class="fa fa-search"></i></a>
    <input type="text" id="search" />
  </form>
</div>

CSS

.no-border {
  border-color: transparent;
  background-color: white;
}

.collapsed {
  width: 49px;
}

.collapsed input {
  display: none;
}

.expanded {
  width: 280px;
}

.expanded input {
  border: 0;
  width: 200px;
}

JavaScript

$(function() {
  $(".btn").button({
    classes: {
      "ui-button": "no-border",
      "ui-state-default": "no-background"
    }
  }).click(function(e) {
    e.preventDefault();
    var widg = $(this).closest(".item-wrapper");
    widg.toggleClass("collapsed expanded");
    if (widg.hasClass("collapsed")) {
      $("#search").val("");
    }
  });
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  $("#search").autoplete({
    source: availableTags
  });
  $("#search-form").submit(function(e) {
    e.preventDefault();
    // Do something with the Search value
  })
});

Working Example: https://jsfiddle/Twisty/wfqv3orm/

Hope this helps.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Expand and show textbox on icon click - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)