I am using Node as the server side language and a mongodb database. I wanted to know how can you add the auto complete functionality in the search bar. For example, I have a property "materialCode" in my object and when I type in say "12" I want a drop down box showing all the materialCodes that start with 12 in that particular collection. Any help would be appreciated
Generally We will do that in front end. If you are using html5 then it can be easily done.(Assuming you are using any template engine or angular or react.) Get all the data from backend(node) using any service call (Say you stored data in allMaterialCode). Then loop through that allMaterialCode and send materialCode values to html5 dataList like below. (Bind materialCode by looping allMaterialsCode). (Assuming you are running node ejs server)
<input list="browsers">
<datalist id="browsers">
<%
var dataObj = ["12","1223","12456","12345","13322","9877"];
%>
<%
for ( let singleItem of dataObj ) {
%>
<option value='<%= singleItem %>'>
<%
}
%>
</datalist>
These links might help.
AutoCompleteHTMl SO
w3schools autocomplete
Related
I have post my html elements to data base like this
<article>
<h1> <span> text editors</span></h1>
<h2>برامج بنستخدمها عشان نكتب الكود بتاعنا وفي اضافات كتيرة بتسهل الشغل بتاعنا -</h2>
<h2>
<a target=_blank href="https://atom.en.uptodown.com/windows">Atom</a> وتاني برنامج هو <a target=_blank href="https://code.visualstudio.com/download">VS Code</a> عندك برنامجين حلويين جدا اول برنامج -
</h2>
<h2><a target=_blank href="https://code.visualstudio.com/download">للتحميل اضغط هنا</a> VS Code في الشرح بتاعنا هنستخدم -</h2>
<h2>زي الفيديو وبعد نفتح البرنامج عادي install بعد كدا هنعمل -</h2>
</article>
and I have get these data to my website. I need away to display the html in ejs. I tried many things but nothing works. I tried to dom-parse and it returns one element.
It's not a good idea to store complete elements in your DB, cause you might need to change the styling or the structure later.
What you can do instead, is store the data inside each of the tags in your DB, fetch the data when your site loads, and then add it to the elements.
I'm new to express JS and try to build CMS like this:
Users have a page builder, where they can drag-and-drop different components on the page.
each component has its own data which also is defined by a user
Each component has its own view template
So, I have to check what components have to load, prepare data for each of them, send this data to an appropriate template, render one big HTML and send to the client.
I know, It's too complicated to explain how to build this, but any tutorials, examples, resources would be appreciated.
IIUC, you can accomplish this using the include function that most template languages have. For the example, I'll use ejs. Also, I'm assuming you know how to get the data for user selections to your server.
on your app.js:
app.get('/someRoute', function(req, res) {
var data = //get user data here
res.render('someTemplate', {data:data});
});
someTemplate.ejs:
<%- include('header') %> //you should do this on every page
<% if (data == 'foo') { %>
<%- include('foo', {data:data}) %> //note that you can pass data to templates like this
<% } %>
<% if (data == 'bar') %>
<%- include('bar') %>
<% } %>
<% include('footer') %>
foo.ejs:
//some component here
If you want to read more, check the docs.
Hope this helps!
You can use Template Engine for that purpose because it enables you to use static template files in your application. At run time, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.
Some popular template engines that work with Express are Pug, Mustache, and EJS. The Express application generator uses Jade as its default, but it also supports several others.
Also check this link
Whilst prototyping something I quickly used some logic in my view to get it working (I've always thought this was a bad idea and it should not be done?). When I previously worked on Rails projects we could make use of view helpers, but working on a NodeJS/Express app I am unsure how to approach this.
I have this in my view for example
<% if (fixture.team_name == "Team 1" && fixture.team_stadium == "Stadium 1") { %>
<span class="label label-success">Team 1</span>
<% } %>
There will be a time when I would want a case statement to decide on what html to deliver but I won't want to put that in the view of course, just call a helper function maybe.
How is this done with Node/Express?
I am rendering a view with the EJS template engine based on some dynamic variables. For example:
res.render("index", {
dynamicVariable: newEverytime
});
I am currently inserting it inside my HTML like so
<% if(someCondition){ %>
<div>
<%= dynamicVariable %>
</div>
<% } %>
I want EJS to create a new <a>tag every time as opposed to replacing my a tag each time. How can I achieve this?
EJS on the server side doesn't create any DOM nodes. It processes HTML source code as text. It just prints strings and it's the HTML parser on the client side that creates the DOM nodes from that.
I think you are asking about a strange solution to a problems that you say nothing about. It would b more useful to ask about the actual problems you're having, what have you tried so far and why it's not working.
I'm using EJS with a Node.js web server I'm building. I see many EJS examples that sometimes use <%= when outputting HTML or strings, while other examples (sometimes within the same template) use <%-.
I tried to reference the EJS docs and getting started guide, but both gave no info about the <%- notation. Also, my Google search attempts yielded nothing useful. Thanks!
The version of EJS you're likely using in Node is not the same as the version you see on Google code; in the Node version, <%= escapes the HTML going into the buffer, while <%- does not. source
From http://ejs.co/:
<% 'Scriptlet' tag, for control-flow, no output
<%= Outputs the value into the template (HTML escaped)
<%- Outputs the unescaped value into the template
<%= *param* %> is use for transfer data from view to controller and vice versa
while <%- %> is to include other code
For my project is
With <%= you if would render some variables that holds a string that holds HTML code, it would not render that HTML code but render it as text to avoid cross-site scripting attacks.
With a minus ( <%- ) you can avoid this, and really render the HTML code.
1)Option One: an ejs file is importing a variable called "noob" which holds for example a req.body value.
<p><%= noob %></p>
2)Option two: an ejs file importing a partial template called "myPartial.ejs" which is inside "partials" folder.
<p><%- include("./partials/myPartial") %></p>
3)Option three: an ejs file is using javascript code:
<p>
<% while (i < 10) { %>
myVar += "The number is " + i;
i++;
<% } %>
</p>