Seems like a basic thing that I’ve already spent way too much time on. I have an autocomplete that is pulling up results from the database correctly. When selecting a result, what is the action trigger to send the user to another page?
Sounds to me like you are using the autocomplete as a search form? I don’t think the autocomplete field is meant to work that way. But you could probably try using the onChange event along with the browser.goto functions.
I think so. User types a value into an input and results automatically show. When they select a result it sends that value to a page that filters based on the URL parameter.
Thanks @brad! I tried the combination you suggested but it didn't work.
Yeah, not sure how you can use it as a search. It also only returns a maximum of 10 results. Not sure if that is an issue in your case. You could maybe try adding it in a form that is submitted with a button? And use onSuccess to redirect to your value.
Hmmm. Maybe I’m not approaching this correctly. Is there another, more standard way? It seems like it would be a common thing to create. Basically, I’m trying to reproduce the functionality of the search at the top of the page here www.onthemargin.app
I wouldn't have thought there was a problem using an autocomplete for searching - or a least for populating a field with a value which will be submitted to a server action query. I would have thought it would work more or less like any other input.
I don't think I've noticed any limit to the number of matches returned by the autocomplete feature.
I’ve done a similar thing and I went back to the ‘old fashioned way’. I created a PHP file, received the post from the search box and used the header("location: /result/" . $_POST['search_term']);
to take the user to the required page. My search form had the action set to the PHP script which contains the line above and the method as POST.
I wouldn’t have thought there was anything unusual about Wappler which means you have to use a ‘non-Wappler’ method for searching - though it makes sense to do whatever works best for you.
I just added an autocomplete input to an existing form and it worked without any extra effort - just like any other field. I set the form action to the results page and sent the URL parameters from the form as usual.
I do things differently in some cases: if I’m searching on the same page as where the results will be displayed, I’ll use dynamic events to modify the query string rather than submit forms, to avoid reloading the page. Wappler makes this very easy.
Would you mind explaining in a little more detail how you did this @TomD? I think there is a gap in my knowledge here.
Set a Value Changed Dynamic Event on the input to submit the form and then use the form that contains the input to carry out any further Events (you could also point it directly to the required page as the Action of the form if you don’t require further events etc). That’s how we did it.
Hope it helps!
I got the redirect part working! It can be set using the “Value Changed” Dynamic Event as suggested. I just wasn’t formatting the Browser Component’s “Go To” URL correctly
Now I just need to figure out how to send the URL parameter to the next page.
I figured out how to set a URL parameter. Apparently, it’s necessary to add the query manager, which I don’t think is mentioned in the instructions here
However, I’m not able to redirect to another page, then set the URL parameter. It gets written over. How would I do this?
You don't need the Query Manager if you only want to define URL params to be used on your page. You need the Query Manager, only when you need to alter/change the value of an URL parameter from your page.
I'll try to explain a little more..
Direct the form containing your auto complete input) action to the page you want to forward to and select Get, in the form action select the results page you want.
The post variable (name of the input) will be sent to this page. You can then filter by this variable. Add value changed event to the input and submit the form.
Quick very basic video:
2.mp4 (1.6 MB)
Hopefully with @Dave 's help you're on your way now. Just a small point - you don't need the Browser Component. You were probably over-complicating it.
Thanks everyone! It’s working now. The problem was that the autocomplete was not inside a form.
I did notice that the URL parameter is sent as the name of the autocomplete even though I defined the app query parameters with a different variable name. So, I set the name of the autocomplete equal to the variable setup in the app query parameter and it works fine.
The URL parameter is always the same as your input name.
Where you define the URL parameters is basically you tell the page/app connect what URL parameter to expect, simply to make it available in the data pickers