quite new to this react thing but i previously wrote a simple js script for my own search input for autocomplete
$(function () {
$("#search_item").autocomplete({
minLength: 1,
source: function (req, resp) {
var collected;
$.getJSON("https://api.test.com/items/autocomplete?q=" + req.term, function (json) {
console.log(json);
resp(json.data);
})
}
});
});
html
<form action="/api/search">
<div class="input-group">
<input id="search_item" type="text" class="form-control" placeholder="Search for..." name="item_search_keyword">
<span class="input-group-btn">
<button class="btn btn-secondary" type="submit" id="btnSubmit">Search!</button>
</span>
</div>
</form>
trying to convert this into React with a simple input search bar but not so familiar with React. Possible if anyone can give me some help?
I think the best answer to this is that you need to convert your mind to React first, before converting the code.
It is not just a small change to migrate code like that to React. React follows a fundamentally different approach, which is not compatible with your example. E.g. you should not touch the DOM directly.
Imagine you are not writing javascript / DOM anymore, but you are writing a different language (i.e. React) now.
As a vague direction for a solution: I guess you would create a React component like <MyInputWithAutoComplete>, which returns e.g. your input-group, and handles your autocomplete logic with a useEffect.