Searchable dynamic datalist with JSON list without Javascript

[alejsanc]

When the options to choose are many, instead of using <select>, an input and a <datalist> dynamically filled with a search in a data source can be used. Javascript is used to do this, but it is something so basic that the browser could do it without the need for Javascript, it would only be necessary to indicate the source of the data.

<input list="article-list" name="article" type="text" />
<datalist id="article-list" src="/article?lang=en&view=json" />

Example query URL with a search parameter added with the content of the input: "/article?lang=en&view=json&search=Ne"

[tomayac]

Not saying this is a good or a bad idea, just reckoning: You would probably need some sort of (JSON or XPath) selector to specify what field to match.

As a minimal example, for an assumed /articles.json endpoint, searching for ma, where would you want the match to be calculated?

[
  …
  {
    "title": "Match here?",
    "body": "Or match here?"
  },
  …
]

[alejsanc]

The search is not done on a JSON file. JSON is what the server returns with a list of identifiers and names for the <option> elements of the <datalist>. The code on the server is what decides what to do with the "search" parameter. In the case of "article" it could be to search for the "title" in a database. Other parameters in the URL could tell the server to do something else.

Example:

Server SQL query: select id, title from article where title ilike '%Ne%';

   id           |              title              
----------------+---------------------------------
 home           | NextTypes Project
 installation   | NextTypes Software Installation
 system         | NextTypes System

JSON return from the server:

{
  "count" : 3,
  "items" : {
    "home" : "NextTypes Project",
    "installation" : "NextTypes Software Installation",
    "system" : "NextTypes System"
  }
}

Datalist in the HTML document:

<datalist>
     <option value="home">NextTypes Project</option>
     <option value="installation">NextTypes Software Installation</option>
     <option value="system">NextTypes Systm</option>
</datalist>

[alejsanc]

I will change the title from "Dynamic datalist with searchable JSON source without Javascript" to "Searchable dynamic datalist with JSON list without Javascript" to prevent confusions

[yoavweiss]

Hey! The chairs noticed that this hasn't seen any recent activity and it doesn't seem like this got any implementation traction. For this kind of a proposal to move forward, it'd be good to get broader community support and implementation champions on board.

Adding a "looking for interest" label.