The behavior of AJAX Search varies between the development and production environments

I recently integrated an instant search feature into my application.

During testing on the local server, the functionality met my expectations:

  • It filters the list as I type
  • It is not case-sensitive
  • It allows for resetting the search if I delete the input

However, when deployed to production, the behavior is erratic. Despite having the same keypress search functionality, several issues arise:

  • The search is case-sensitive, unlike in development
  • The resetting mechanism does not work as expected
  • The search results seem inaccurate. For example, typing "z" does not filter out any items, whereas typing "Blogging" correctly narrows down the list

I am puzzled by this discrepancy. Why are the two environments behaving differently? And how can I resolve these issues? Any insights or code suggestions would be greatly appreciated.

Here is a snippet of my code:

archive.html.erb

<%= form_tag @post, :method => 'get', :id => "posts_search", class: "search_form squeeze form-inline" do %>
  <p>
    <%= text_field_tag :search, params[:search], 
    placeholder: "Search titles:", id: "search_field" %>
    <%= submit_tag "Search", name: nil, class: "btn squeeze search" %>
  </p>
  <div id="list"><%= render 'search' %></div>
<% end %>

_search.html.erb

<ul class="blog_links">
<% @posts.first(@link_num).each do |p| %>
    <li class="total_hover">
        <%= p.name %>
    </li>
<% end %>
</ul>

archive.js.erb

$("#list").html("<%= escape_javascript(render("search")) %>");

posts_controller.rb

  def archive
    @posts = Post.search(params[:search]).reverse

    respond_to do |format|
      format.html # index.html.erb
      format.json { render json: @posts }
      format.js
    end
  end

 def search
    @posts = Post.search(params[:search]).reverse
    render json: { results: @posts }
 end

post.rb

  def self.search(search)
    if search
      where('name LIKE ?', "%#{search}%")
    else
      scoped
    end
  end

javascripts/posts.js.coffee

@search = ->
  $.get $('#posts_search').attr("action"), $("#posts_search").serialize(), null, "script"

$ ->
  $('#posts_search input').keypress -> search()

  $('#posts_search').submit (e) ->
    e.preventDefault()
    search()

routes.rb

match '/search', to: 'posts#search'
match '/archive', to: 'posts#archive'

EDIT To provide some clues, I'm executing the same user behavior in both environments and posting the blogs. What I'll do is this:

  1. Load the page containing the search.
  2. Enter "Blgo"
  3. Delete the "go" and replace it with "og"
  4. Delete everything and search for "Insta"

development logs

...

heroku logs

...

Again, the search functionality works differently in production compared to development. Any suggestions on resolving this inconsistency are welcome.

Answer №1

The issue turned out to be related to the database setup.

Initially, I had been using sqlite for development and postgresql for production. However, I encountered discrepancies in how the two databases handled my search queries. Upon switching to pg for development, the search functionality was still flawed in both environments. This led me to opt for Thinking Sphinx instead of creating a custom solution.

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

Are Twitter Bootstrap buttons compatible with iPad devices?

Have you ever tried using the attractive buttons provided by Twitter? They can be a great alternative to standard radio/checkbox options. If you have used them in your production, how effective were they? I am particularly curious about their compatibilit ...

Tips for extracting the URL from a JSP using JavaScript

When my JSP returns, it loads a JavaScript that serves as a form action when a button is clicked. This JavaScript includes a request.open() call, with the URL it needs to pass as a peer of the JSP that loaded it. The URL must be the one that was originally ...

Hybrid component that combines static and dynamic elements in Gatsby

The inconsistency in behavior between the site generated by gatsby develop and gatsby build is causing an issue where the site works during development but not when it's in production. An overview of my website: My website is a simple blog-like plat ...

Retrieve an image from the database and associate it with corresponding features or news in PHP

I have retrieved a value from the database, displayed it as an image, and made it a link. So, I want that when a user clicks on the different image, they get the result from the query related to the image. I hope everyone understands. <?php // Connect ...

Troubleshooting JavaScript: Dealing with JSON Import Issues Involving Arrays of Objects

I'm encountering an issue while trying to import a JSON file that contains an array of blog-posts. Although all the data from the JSON file is successfully imported, I am facing troubles with accessing the Array of objects (edges). This specific code ...

A script error occurs exclusively on dynamic routing in a static web page generated by NUXT

Currently working on a Nuxt.js website and encountering an issue. Initially, nuxt.config.js was set up as below to enable a headless CMS. export default { target: "static", ssr: true, generate: { async routes() { const pages = awa ...

Refresh the mapbox source features in real-time

Currently, I am mapping out orders on a map with layers and symbols that have different statuses. When the status of an order changes, I want to update the color of the symbol accordingly. The layer configuration looks like this: map.addLayer({ id: &q ...

What is the best way to display a Nested JSON structure without an object key?

Need help with extracting data from two different JSON structures. The first one is straightforward, but the second is nested in multiple arrays. How can I access the content? See below for the code snippets: // First JSON { "allSuSa": [ { ...

A guide on resolving the TypeError 'download property of undefined' issue when using Puppeteer with browser.downloads.download

Using puppeteer, I am automating the login process to access my account on a content provider's site and download multiple zip files. After obtaining an array of links to download, I go through each link in a loop and utilize the browser.downloads.dow ...

Using infoWindows with multiple markers in Google Maps

i have developed a custom Google Maps application that pulls data from a CSV file. The functionality works well, but I am facing an issue with the infoWindow when looping through all the objects. It seems like the problem stems from the marker variable bei ...

Leveraging various techniques within a single controller in AngularJS

I am seeking assistance and advice on a coding issue I am facing. I am attempting to use two methods in one controller. The first method is to display selected rooms, while the second method is to display selected pax. However, only the first method seems ...

Setting up a jHipster application integrated with MongoDB on Heroku, utilizing the ObjectRocket addon for smooth performance

After creating a jHipster application using a MongoDB database, I have been struggling to deploy it on Heroku for the past few days. I followed the necessary steps by running the heroku generator with "jhipster heroku". I then pushed the code to the heroku ...

Tips for finding the displayRows paragraph within the MUI table pagination, nestled between the preceding and succeeding page buttons

Incorporating a Material-UI table pagination component into my React application, I am striving to position the text that indicates the current range of rows between the two action buttons (previous and next). <TablePagination ...

What is the process for uploading a file with POST in angular?

What is the best way to send a pdf file without completely revamping our current system? I have explored various methods online, but most of them involve significant changes to our architecture, which is not ideal. Although I am not very experienced with ...

What methods can be used to broaden configuration variables within VSCode using an extension?

I attempted to develop an extension for vscode that requires reading the pasteImage.parth variable from the ./vscode/settings.json file { "pasteImage.path": "${workspaceRoot}/assets/images" } In my attempt to retrieve the variable us ...

What is preventing me from adding any style to this specific element?

Currently, I am in the process of creating a stopwatch for solving Rubik's cube. Within this project, there is a div element named "records" that is meant to display the time after a button is clicked. However, I am facing an issue where I am unable t ...

Storing chrome identity api responses in a Vue.js component can be achieved by creating a function

When passing the response from the Chrome Identity API to the tab running my Vue-powered Chrome extension, I encountered an issue in storing this information inside my Vue instance for use within a component. Despite trying to assign the info to a variable ...

Are there any negatives to turning off create-react-app's SKIP_PREFLIGHT_CHECK option?

After setting up my create-react-app project, I added eslint as a dev dependency. My reasons for doing this include: 1) Running eslint as a pre-commit check using husky and lint-staged 2) Extending CRA's eslint with airbnb and prettier lint configs ...

Activate the HTML drop-down option upon selecting the radio button, or the other way around

I'm attempting to accomplish a task. Below is the code snippet I am working with: <form> <input type='radio' name='radio_flavour' checked/>Unique flavour<br/><input class='double-flavoured' type=&apo ...

React Native error - "Invalid element type: expected a string or class/function, but received undefined" - encountering issue with importing a custom library?

Alright, I'm looking to make some modifications to this library, so I am attempting to import the non-transpiled version by downloading the repository and importing it from here: https://github.com/nicotroia/react-native-floating-action-menu#readme A ...