title: How to add a search button action in autocomplete search
body: <p>I'm having problem in one issue. Blogger autocomplete search. I'm novice in programming. I want to add a button in the bottom which will work as a search submit / action button.</p>
  <p>Here's my code:</p>
  <pre><code>    &lt;style type=&quot;text/css&quot;&gt;
    #searchForm {
      display: inline-block;
      position: relative;
      width: 500px;
    }
    #searchForm input {
      background: transparent;
      font-size: 14px;
      line-height: 27px;
      text-indent: 14px;
      width: 90%;
      color: #212121;
      border: 1px solid #e0e0e0;
      border-right: none;
      border-radius: 2px 0 0 2px;
      outline: 0;
    }
    #searchForm input:hover,
    #searchForm button:hover {
      border: 1px solid #b9b9b9;
      border-top: 1px solid #a0a0a0;
      -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    #searchForm button {
      width: 60px;
      border: 1px solid #e0e0e0;
      border-radius: 0 2px 2px 0;
      background: rgb(230, 230, 230);
      cursor: pointer;
      position: absolute;
      top: 10px;
      outline: 0;
      line-height: 27px;
    }
    #searchForm button svg {
      vertical-align: middle;
      width: 21px;
      height: 21px;
    }
    .results {
      position: absolute;
      top: 50px;
      background: #fff;
      border: 1px solid #e0e0e0;
      width: 90%;
      min-width: 320px;
      border-top: unset;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    .results li {
      line-height: 15px;
      list-style: none;
    }
    .results li a {
      display: block;
      padding: 0 15px;
      color: #212121;
      font-size: 15px;
      font-weight: 500;
      line-height: 30px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .results li:hover {
      background: rgb(230, 230, 230);
    }
    .hidden {
      display: none !important;
    }
  
    .expanded_result {
      display: none;
    }
  &lt;/style&gt;
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;form id=&quot;searchForm&quot; action=&quot;/search&quot;&gt;
    &lt;input autocomplete=&quot;off&quot; name=&quot;q&quot; placeholder=&quot;Search&quot; value=&quot;&quot; /&gt;
  &lt;/form&gt;
  
  &lt;ul id=&quot;rslt&quot; class=&quot;results hidden&quot;&gt;&lt;/ul&gt;
  
  &lt;button class=&quot;clear-text hidden&quot;&gt;×&lt;/button&gt;
  
  &lt;script&gt;
    //&lt;![CDATA[
    $(window).on(&quot;load&quot;, function () {
      $(&quot;#searchForm input&quot;).on(&quot;keyup&quot;, function (e) {
        var textinput = $(this).val();
  
        if (textinput) {
          $.ajax({
            type: &quot;GET&quot;,
            url: &quot;https://www.soratemplates.com/feeds/posts/summary&quot;,
            data: {
              alt: &quot;json&quot;,
              q: textinput,
            },
            dataType: &quot;jsonp&quot;,
            success: function (data) {
              $(&quot;.results,.clear-text&quot;).removeClass(&quot;hidden&quot;);
              $(&quot;.results&quot;).empty();
              let seeMoreArr = [];
              function mk_list_dom(postUrl, postTitle) {
                return (
                  &quot;&lt;li&gt;&lt;a href=&quot; +
                  postUrl +
                  ' title=&quot;' +
                  postTitle +
                  '&quot;&gt;' +
                  postTitle +
                  &quot;&lt;/li&gt;&quot;
                );
              }
  
              if (data.feed.entry) {
                for (var i = 0; i &lt; data.feed.entry.length; i++) {
                  for (var j = 0; j &lt; data.feed.entry[i].link.length; j++) {
                    if (data.feed.entry[i].link[j].rel == &quot;alternate&quot;) {
                      var postUrl = data.feed.entry[i].link[j].href;
                      break;
                    }
                  }
  
                  var postTitle = data.feed.entry[i].title.$t;
  
                  i &lt; 10 &amp;&amp; $(&quot;.results&quot;).append(mk_list_dom(postUrl, 
  
  postTitle));
                      
  
  i &gt; 9 &amp;&amp; seeMoreArr.push({ postUrl, postTitle });
                }
                
                
                /*
  
                data.feed.entry.length &gt; 9 &amp;&amp;
                  $(&quot;.results&quot;).append(
                    '&lt;div class=&quot;expand_&quot;&gt; &lt;div class=&quot;expanded_result&quot;&gt;&lt;/div&gt; &lt;button class=&quot;expand_btn&quot;&gt;see more&lt;/button&gt;&lt;/div&gt;'
                  ),
                  
  
                  seeMoreArr.forEach(({ postUrl, postTitle }) =&gt; {
                    $(&quot;.expanded_result&quot;).append(mk_list_dom(postUrl, postTitle));
                  }),
                  
                  
                  $(&quot;.expand_btn&quot;).on(&quot;click&quot;, (e) =&gt; {
                    $(&quot;.expanded_result&quot;).toggle();
  
                    $(e.target).text(function (i, text) {
                      return text === &quot;see more&quot; ? &quot;see less&quot; : &quot;see more&quot;;
                    });
                    
                  });
                 
                 */
                  
                  
              } else {
                $(&quot;.results&quot;).append(
                  &quot;&lt;div&gt; No results &lt;/div&gt;&quot;
                );
              }
  
              data.feed.entry
                ? $(&quot;.results&quot;).append(
                    &quot;&lt;div&gt;found result: &quot; + data.feed.entry.length + &quot;&lt;/div&gt;&quot;
                  )
                : $(&quot;.results&quot;).append(&quot;&lt;div&gt;found result: 0&lt;/div&gt;&quot;);
            },
          });
        } else {
          $(&quot;.results,.clear-text&quot;).addClass(&quot;hidden&quot;);
        }
      });
  
      $(&quot;.clear-text&quot;).click(function () {
        $(&quot;#searchForm input&quot;).val(&quot;&quot;);
        $(&quot;.results,.clear-text&quot;).addClass(&quot;hidden&quot;);
        $(&quot;.results&quot;).empty();
      });
    });
    //]]&gt;
  &lt;/script&gt;
  </code></pre>
  <p>I want to add a button at the bottom of result div or section, which Will work as submit / search button. By clicking people can go to search results.</p>
  <p>If anyone know, please help me.</p>