Add commas to display when creating search queries

[Worhammer]

It would greatly increase the readability. I can't be the only one who has to count the zeros to make sure it's what I actually want to search for.

[oldben87]

Changing a user's input as they are typing can be a bit strange.

If you have an example of a website that does this well so I can try to guess / see what they are doing that would be great. Otherwise maybe we can change it when a user defocuses the input?

Also side note: Does the backend handle strings then parse them to numbers with commas in? As javascript doesn't do this by default so will require site wide adjustments to add this in.

[Worhammer]

I asked ChatGPT and this is what it spit out. I'm not a programmer, so please don't blame me if it's garbage. 🤐

Step 1: Create a new component for the inut with commas:
// components/NumberInputWithCommas.js
import React, { useState } from 'react';

const NumberInputWithCommas = () => {
  const [formattedValue, setFormattedValue] = useState('');

  const handleInputChange = (event) => {
    const rawValue = event.target.value;
    const formatted = formatNumberWithCommas(rawValue);
    setFormattedValue(formatted);
  };

  const formatNumberWithCommas = (value) => {
    return value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  };

  return (
    <input
      type="text"
      value={formattedValue}
      onChange={handleInputChange}
      placeholder="Enter a number"
    />
  );
};

export default NumberInputWithCommas;

Step 2: Use the "NumberInputWithCommas" component in your Remix route
// routes/someRoute.js
import React from 'react';
import NumberInputWithCommas from '../components/NumberInputWithCommas';

const SomeRoute = () => {
  return (
    <div>
      <h1>Example Using Number Input with Commas</h1>
      <NumberInputWithCommas />
    </div>
  );
};

export default SomeRoute;

Edit: Github code block fail. Also I love sneezing right when you're trying to click comment and hit the close with comment instead....

[oldben87]

Im not concerned with the code implementation, its a relatively straight forward thing to do.

Its more user experience isnt great when changing a users input when someone is typing. That was why I was asking for an example of a site that does this well. Sorry for any confusion!

[Worhammer]

Oh, I got it. Yeah, I can see how it would lead to weird stuff - I think the best approach would probably be as you said, to add the commas after defocus.

The main problem would really just be with default values, right? If I'm entering a number I (generally) know how many zeroes I've entered so it's less of an issue then.

I would suggest a slider, but sliders are even worse than counting zeroes on every website I've ever had to use them on (Looking at you, PC Part Picker and New Egg....)

Although, now that I went to newegg just to make sure that their slider was as bad as I remember (it is) - they seem to have the "enter comma without defocus" down without any weirdness. https://www.newegg.com/ClearanceStore/EventSaleStore/ID-697?cm_sp=Head_Navigation-_-Under_Search_Bar-_-Clearance&icid=755812