Using Enter to Search with input

[Po5]

Hi All,

I've recently created a PowerApp which will allow a User to input a number and selecting the search button will cause a Collection to be filtered and shown below.

The App would mainly be used in browser.

This all works fine, however I am not sure how to configure it so the search button can be selected when a User hits enter (as most users would when using a search bar.

I know in most cases you could just add the filter logic on-change of the text field but I am looking for options that are different from that.

Ideally the User would enter a number, hit the Enter button and the Collection would show a list of items filtered by that input.

Cheers

[Anonymous]

@Po5 

The OnChange event of your Text input is the best option here, just add this to that property

Select(searchButtonName)

[Po5]

Hi,

Thanks for that.

It does provide a better option than just clicking Search every time but is still not exactly what I'm looking for.

For example, using this if I click away or press tab it will filter, which somewhat makes the search button redundant.

In this case however I want the User to have to hit enter after typing or select the search button to filter, which is behaviour I would expect from a normal search bar with a search button.

Cheers

[Anonymous]

@Po5 

Im pretty sure there’s nothing natively built into PowerApps that can do what you want.

You could use variables to control the behaviour you want but it’d be tiresome to implement.

[Drrickryp]

@Po5 

Not so difficult to implement.  Just have the Search button OnSelect be

UpdateContext({var: Search(datasource, TextInput1.Text, "Column2Search")}) and set the Items property of the gallery to "var"

[Po5]

I thought as much around nothing native being available.

I am curious around how I could use variables if you have an idea.

Cheers

[Po5]

Unfortunately this provides the same functionality I already have.

It doesn't allow me to execute a search by hitting enter.

[Anonymous]

@Po5 

I've had a bit of a play around but can't get any variables to work how I want. The OnChange and OnSelect properties are the only options to use.

I think it's possible, I just don't have the time to mess around with it, sorry.

[veztys]

Correct, there is nothing native available but not impossible.

Assuming you have the search text box and search button set up.

1. Change the Mode property of the search text control to TextMode.MultiLine
2. Add a Slider Control and hide it i.e Visible property = false
3. Set the Default property of the slider control to:

Len(txtQuery.Text)

4. The above code gets the OnChange Event of the Slider going on each keystroke. Therefore, set the OnChange event of the slider to: 

// Capture what was typed. If you try doing this with the search text input control,
// it does not work as the OnChange() event only fires when the focus leaves the control.
// Hence using the slider control's OnChange as each keystroke triggers the OnChange event.
Set(varSearchText; txtQuery.Text);;

// Now check if <Enter> was pressed.
// Checking for Chr(13) - Carriage Return (CR) does not work, 
// We check for Chr(10) - Line-Feed(LF):
If(Find(Char(10); varSearchText)>0;

    // Remove the LF that was detected.
    Set(varSearchText; Left(varSearchText; Len(varSearchText)-1));;

    // Now mimic the Search button press.
    Select(btnSearch);;

);;

5. Lastly, set the Default property of the search text control to varSearchText.

If I get time I will package it up in a file so you can just import it as a component.

Hope this solves the problem!

[kej]

the formula you given cannot be used. 

this is the one that worked for me:

// Capture what was typed.
Set(varSearchText, txtInput.Text);

// Now check if <Enter> was pressed.
// Checking for Char(13) - Carriage Return (CR) should work.
If(
    Char(13) in varSearchText,
    
    // Remove the CR that was detected.
    Set(varSearchText, Left(varSearchText, Len(varSearchText) - 1));
    
    // Now mimic the Search button press.
    Select(icnSend)
)