Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

2.0 components: Prevent searching with empty input field

See original GitHub issue

I am using the new 2.0 packages, including the UI search components. When I navigate to my search page in my application (see excerpt of search page template below), easysearch does an immediate search, even though the input field is blank. I have looked through the code but cannot figure out where this initial search is getting triggered from. If the input field is blank, I do not want it to trigger a search. I am using an index with the MongoGB engine.

                <div class="row">
                    <div class="col-xs-12">
                        {{> EasySearch.Input index=mySearchIndex attributes=getInputAttributes timeout=500}}
                    </div>
                 </div>
                <div class="row">
                    <div class="col-xs-12">
                      <h4>Search Results&nbsp;<small>Showing {{getResultCurrentCount}} of {{getResultCount}} results</small></h4>
                      <div class="list-group">
                        {{#EasySearch.Each index=mySearchIndex}}
                          {{> searchSpecificationResultItem resultItem=this}}
                        {{/EasySearch.Each}}
                      </div>
                      {{> EasySearch.LoadMore index=mySearchIndex attributes=getLoadMoreAttributes}}

                      {{#EasySearch.IfNoResults index=mySearchIndex}}
                        <div class="no-results">No results found!</div>
                      {{/EasySearch.IfNoResults}}
                    </div>
                </div>

Issue Analytics

State:
Created 8 years ago
Comments:18 (12 by maintainers)

Top GitHub Comments

2reactions

rjsmithcommented, Nov 17, 2015

@matteodem. Thanks. I just tried it in my application. When the search input is empty, the search still seems to be invoked, and it goes into an unending loop sending blank search queries to the server. It only stops when I enter a non-blank search query.

 {{> EasySearch.Input indexes=myIndex attributes=getInputAttributes timeout=500}}

                       {{#EasySearch.IfInputEmpty index=myIndex}}
                          <div class="no-results">Enter a search word</div>
                        {{else}}
                          <small>Showing {{getResultCurrentCount myIndex}} of {{getResultCount myIndex}} results</small>
                          <div class="list-group">
                            {{#EasySearch.Each index=myIndex}}
                              {{> searchSpecificationResultItem resultItem=this}}
                            {{/EasySearch.Each}}
                          </div>
                     {{/EasySearch.IfInputEmpty}}

Am I using it correctly?

1reaction

ghostcommented, Jan 31, 2016

@matteodem - first off, you rock!

2nd - @rjsmith, great questions. I’m just getting into Meteor and working through all this great stuff, but having trouble getting the attributes for the EasySearch.Input component to take.

I have the following line in my Template: {{> EasySearch.Input index=offendersIndex attributes=inputAttributes}}

And in the JS file I have: inputAttributes: function () { return { class: 'easy-search-input', placeholder: 'First, Last, Street, City, County, Status...' }; }

What am I missing?

Top Results From Across the Web

If input field is empty, disable submit button - Stack Overflow

If input field is empty, disable submit button · 1. Add an else statement that disables it · 1. You never disable it...

if input is empty disable button javascript - You.com | The AI ...

You can use .change() event handler. It will be dispatched when input value will be changed. So when somebody just pastes on the...

invalid - CSS: Cascading Style Sheets - MDN Web Docs

This pseudo-class is useful for highlighting field errors for the user. Syntax. :invalid. Examples. Coloring elements to show validation ...

Forms | RedwoodJS Docs

The emptyAs prop allows the user to override the default value for an input field if the field is empty. Provided that a...

Form fields - Django documentation

If a Field has required=False and you pass clean() an empty value, then clean() ... Set the Form.use_required_attribute attribute to False to disable...