Designing a query feature to explore a Sequel Database utilizing a 'RETRIEVE' approach

In my index.erb, I've created a search bar with the following code:

<nav>
  <div class="nav-wrapper">
    <form>
      <div class="input-field">
        <input id="search" type="search" placeholder="Search..." required>
        <label for="search"><i class="mdi-action-search"></i></label>
        <i class="mdi-navigation-close"></i>
      </div>
    </form>
  </div>
</nav>

Now, I want to implement functionality so that this search bar can query my Sequel Database using a GET method in my app.rb. However, I'm facing a few challenges.

Issue 1: How do I capture and store the user's input from the search bar into a variable that I can then utilize in my GET method in app.rb? Essentially, how can I retain the search query entered by the user?

Issue 2: Is there any naming convention I should follow when defining the GET method in my app.rb file?

Issue 3: For database querying, I aim to use the .where() method. In my model.rb, I have a class called Town with data collections which I intend to search through. Would my code snippet look like this in app.rb?

@towns = Town.where(:name => @variable_from_part1)

Considering the input gathered from Issue 1, how can I effectively perform a search on my Sequel database based on the user's search query and display the results on the webpage?

Your assistance is greatly appreciated!

Answer №1

SECTION 1 To include a specific identifier, such as a name, inside an <input/> element, you would format it like this:

<input name="username" type="text" placeholder="Enter username..."/>

For submitting the input, you can use a basic input field with the type=submit:

<input type="submit" value="Submit"/>

SECTION 2 The naming of the GET method is flexible. You have the option to utilize different methods for searching databases. One approach could involve having a route like get '/search' do, which leads users to a page containing a search bar. The action of that search bar could direct back to another root like get '/' do. Alternatively, all actions could be combined within a single GET root.

SECTION 3 In the app.rb file, specifically under the GET root (get '/' do), the text entered into the input field can be accessed using params[:search].

get '/' do
    @results = Result.where(:query => params[:search])
end

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transferring live data between AJAX-triggered pop-up windows

Utilizing modals frequently in my application is a common practice. There are instances where I need to transfer data from one modal box to another. For instance: Suppose there is a table listing different car manufacturers (Audi, BMW, Honda, etc). Each r ...

Cleaning up HTML strings in Angular may strip off attribute formatting

I've been experimenting and creating a function to dynamically generate form fields. Initially, the Angular sanitizer was removing <input> tags, so I discovered a way to work around this by bypassing the sanitation process for the HTML code stri ...

I'm unsure how to utilize the generic type in this particular scenario. It's a bit confusing to me

Recently, I delved into TypeScript generics and applied them in specific scenarios. However, I encountered some challenges. While working with two different interfaces, I faced a need for flexibility. For instance, I needed to make server requests. func ...

Using the val() function on a select element can occasionally result in a null value

Having an issue with my select. For some reason, when I use $(".test").val(), it sporadically returns null. Can't seem to figure out what's causing this inconsistency. console.log($('.test').val()); <script src="https://ajax.googl ...

Submitting data to a PHP script using AJAX and the $_POST method

I'm attempting to transfer data from my AJAX request into a PHP $_POST variable in order to update my database. HTML <form id="23" method="post"> <select name="admin" onchange="chosenadmin(23)"> <option value="rick">rick&l ...

Implementing key strokes in an HTML input field within a geckoWebBrowser

I am currently using the "geckoWebBrowser1" component to navigate to a URL that displays a login textbox with the ID: login-email Although I have successfully inserted "[email protected]" into the aforementioned textbox, it is essential to simulate k ...

Adjust the formatDate function in the Material UI datepicker

I recently implemented the material-ui datepicker component with redux form and it's been working great. However, I have encountered a minor issue. Whenever I change the date, it displays in the input field as yyyy-mm-dd format. I would like it to app ...

Activate the Keypress event to update the input value in React upon pressing the Enter

I am facing an issue where I need to reset the value of an input using a method triggered by onPressEnter. Here is the input code: <Input type="text" placeholder="new account" onPressEnter={(event) => this.onCreateAccount(event)}> < ...

Having trouble locating the objects in the parent scope of an Angular directive

My custom directive needs to access the object $scope.$parent.users. When I use console.log $scope.$parent: myDirective.directive('scheduleItem', function(){ return { restrict: 'EA', link: function($sco ...

Refreshing a web page in Internet Explorer can cause the HTTP Header content to be altered

As I monitor my dashboard retrieving continuous data from an SAP server, I stumbled upon a solution to fetch the current server date. This approach allows me to display when the dashboard was last updated, and this date is displayed in the DOM. //Method f ...

My simple application is experiencing a problem where ComponentDidMount is not being invoked

I used a tool called create-react-app to build this simple application. Strangely, the ComponentDidMount method is never getting invoked. import React, { Component } from "react"; class App extends Component { componentDidMount() { console.log("M ...

Trying out the Deezer app and receiving the message: "Please provide a valid redirect URI."

While testing an application using the Deezer JavaScript SDK, I encountered an issue when trying to login as it prompted me with a "You must enter a valid redirect uri" message. Here is the setup: DZ.init({ appId: '000000', channelUrl: ...

What is preventing me from adding content to a <p> element?

I'm currently developing a ToDo list web application and I'm working on retrieving the information from 4 text boxes to create the content for each ToDo item. However, when I attempt to link the elements generated from the form, I encounter the ...

Reveal Password Feature in Angular After User Click

I am working on an inventory page that includes a password field. My goal is to initially hide the password and display it as points (****) instead. I would like the password to be revealed either when clicked or through a pop-up. JS var retrieveCert ...

Encountering an issue when trying to use multiple selections in a drop down list with Angular.js

I am facing a major issue. I need to be able to select multiple values from a drop down list, so I implemented bootstrap-multiselect.js. However, I encountered the following error: angularjs.js:107 TypeError: a.forEach is not a function at u.writeValu ...

Generating a file using buffer information in node.js

From the front-end client side, I am sending a file to the server. On the server-side, the data received looks something like this: { name: 'CV-FILIPECOSTA.pdf', data: <Buffer 25 50 44 46 2d 31 2e 35 0d 25 e2 e3 cf d3 0d 0a 31 20 30 20 6f 6 ...

Real-time preview of a text field in JavaScript

I'm attempting to create a similar piece of code like the one at the bottom of this page for leaving comments. I have the basic code, but the result doesn't display new lines (or HTML, although that's not essential). I have the function belo ...

Invoking a React function repeatedly (every second)

Currently, I am working with React and utilizing Material UI to create a modal. The modal is rendered as part of the body of the code, placed at the bottom of the page. Its visibility is controlled by the state; if it's open or closed. However, I&apos ...

Having trouble getting Jquery autocomplete to function properly with a complicated array?

I started with the guidance provided in this post, which was successful. To investigate why it's not functioning, I made a JsFiddle but couldn't figure out the issue. Even when trying to search for results using the first letter of the last name ...

Exploring the concept of front-end deletion through ajax technology

I'm currently tackling a front-end CRUD RESTful API project and encountering challenges specifically related to the DELETE and PUT methods. While I have successfully managed to implement the GET and POST functionalities, utilizing a forms.html file f ...