Building Server Driven Smart Filter With Syntax Highlighting and Intellisense
If you are reading this then most probably you are a developer and most probably you have experience with IDEs. IDEs have become indispensible for developers, where smart intellisense suggestions simplify your life. I wanted that same magic for my web app's search functionality. Here's how I built an intelligent search system using CodeMirror on the frontend and F# doing the heavy lifting on the backend.
The Problem
I wanted users to filter cryptocurrencies using natural language like name:Bitcoin marketCap>1B OR ticker:ETH
. I wanted search to be smart enough to suggest completions, highlight syntax errors, and handle complex queries without breaking.
After few iterations I arrived at the reasonable model. Keep minimal logic with syntax highlighting based on codemirror on frontend, and use F# where it shines, for both intellisense and expression translation into AST.
Codemirror
is my favourite go-to editor, which is heavily customizable and browser-based. You could compare it to vscode
, which is very heavy and you would have a hard time customizing it into a single line text-like field.