This question regards website programming. My primary languages are c++/c# and I don't know much about web development, except that say I understand html and css. That's why I'm looking for a relatively simple solution, preferably something out of the box. I don't have any experience with JavaScript, but for the sake of this project I'm willing to learn it if necessary.
Let's say I have a database, where each entry is about a book. It contains the fields: title, author(s) and publication date.
I would like to create a simple website with a search box that has this dynamic result feature, so that you get suggestions after you type in a few letters. All those suggestions, as well as search results, need to be based purely on the database.
This could be a static website or based on any Content Management System, I'm familiar with Joomla, but was unable to find an out-of-the box component that would do just that. All those search modules search the entire website and I only need to search the database.
Probably I can help you with how to implement this feature. We used to call this feature as autocomplete menu.
First you decide minimum characters to populate autocomplete menu. For example 2
By using javascript you write keyup event. Once the characters count reaches to the minimum character count. You send AJAX request to the server.
The server should process this request and do the database search and form a json or xml response or plain text to the client.
The client parses that response into javascript object and construct a dynamic html for autocomplete menu with the data and render it into the DOM hence display's just below the search text box.
Now if you want to display the first result inside the textbox as you type. Here is the method I can suggest as similar as google search box
Place one label or span just below the input text box. By using css make its position exactly match with the position of the text box. Make sure the starting of text of both input text and label matches. Make the text color of the label less brighter than the font color of text. The font size and font family of the label should match the input text field's style. Now by using Javascript display the first or most matched text inside the label. Please find the sample code below
<!DOCTYPE html>
<head>
<style>
label {
position:relative;
}
body, input {
font-family: 'verdana';
font-size: 12px;
}
</style>
</head>
<html>
<body>
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="Matched Text" /><br>
<label> Matched Text</label><br>
</form>
</body>
</html>
Related
in JHipster application I want to display a default text within a html element when a translation is missing.
I use angular ngFor directive to display elements in an array, some of which have a translation and some of which are inserted by a user, and therefore have no translation in i18n json. I couldn't find any documentation that explained how to use jhiTranslate
I was thinking about syntax like this
<div jhiTranslate="example.1">Default Text</div>
and if this particular translation was missing a "Default Text" would be shown. for now it shows "translation-not-found[example.1]".
Is there a way to achieve this using jhiTranslate?
We've noticed a bug when looking at French search results. in the CMS Desk, i've kept the Page Name in English for the French content. The issue is, these are showing on the French results page.
in the transformation, based off the default one, I present the clickable title like this:
<a href='<%# SearchResultUrl() %>' data-type="title" target="_blank" ><%#SearchHighlight(HTMLHelper.HTMLEncode(CMS.ExtendedControls.ControlsHelper.RemoveDynamicControls(DataHelper.GetNotEmpty(Eval("Title"), ""))), "<span class='highLight'>", "</span>")%></a>
Here's my thinking, if the Menu Caption is filled out, use that rather than title. How do i output DocumentMenuCaption without adjust the search fields on the menu page type?
I think my logic is, check if DocumentMenuCaption is emtpy, if it use, use Title.
You should be able to continue using GetNotEmpty and just pass in the DocumentMenuCaption first, something like this:
<%# GetNotEmpty(GetSearchValue("DocumentMenuCaption");Eval("Title")) %>
You may or may not need the "GetSearchValue" function, but that allows you to grab values from the object that may not be available in the default set of columns for the search results.
Alternatively, you should be able to use the IfEmpty() method:
<%# IfEmpty(GetSearchValue("DocumentMenuCaption"), Eval("Title"), GetSearchValue("DocumentMenuCaption")) %>
Both transformation methods taken from here (double check syntax on "GetNotEmpty" as there are different ways it's implemented: https://docs.kentico.com/k9/developing-websites/loading-and-displaying-data-on-websites/writing-transformations/reference-transformation-methods
You can read more about the search transformations here: https://docs.kentico.com/k9/configuring-kentico/setting-up-search-on-your-website/displaying-search-results-using-transformations
I have gotten the hang of using the html agility pack to find specific nodes using their attributes and xpaths. The problem is, I've been doing this manually for each of my projects (opening the website html and scanning for the nodes that have the text i need). Is there a way to select a single node by its inner text? This would make it easier to write an update script for websites whose content scheme is the same, but attribute tags change values over time. Thanks in advance!
Would be better if you have provided sample HTML, but since you haven't, let's assume we have HTML containing this markup :
<body>
<div class="foo">bar</div>
</body>
You can select the <div> by it's attribute using HtmlAgilityPack's SelectSingleNode() and XPath like so :
myHtmlDocument.DocumentNode.SelectSingleNode("//div[#class='foo']");
or you can select the same by the inner text like so :
myHtmlDocument.DocumentNode.SelectSingleNode("//div[.='bar']");
Hope this help.
Is there a way how to adjust HTML generated by xPage from document rich text field? I have q document from which the rich text field content is displayed on xPage using computed text control. Solution works nice except, that xPages engine generates strange HTML from the rich text field. When displaying page on web using standard form, all texts written by default font and default size doesn't contain markup arround so on could use CSS to style it. Not this way in xPages. Everything have tag around and its not funny seeing generated font tag around the div tag :-(
<div class="tcl-columns3-in">
<font size="2" face="sans-serif"></font>
<font size="2" face="sans-serif">
<b>Header text ...</b>
</font>
<font size="2" face="sans-serif">
<div class="tcl-box-outlined">
text ...<br>
</div>
</font>
</div>
Is there a way how to get rid of out of generated HTML?. I looked to html filtering option with ASF filter but it requires to adjust settings on filesystem, which not option for me ...
There are a number of steps you narrow down your problem. RichText -> MIME -> RichText is not a problem free relationship. As Carl pointed out, you can have a look at the raw RichText -> Mime conversion result. Does that look OK? Then you could use a Dijit ContentPane to pull that content in.
It also depends on what control you use to display the content. You might have different success with textbox and RichText editor. If you look for very high fidelity you either store your RT as mime (a property of a RT field) or use Coex Edit a commercial server plug-in
use a computedField in your Xapge, and set the value to something like this
var rt = document1.getDocument().getFirstItem("Body");
return rt.getUnformattedText()
using this technique you can also format the content the way you like as it is all text. I use this to display colored and formatted json and xml
How to display value with HTML tag inside h:inputTextarea?
In DB I have column contain data, it contain plain text and HTML tag, I want display it on h:inputTextarea. How can I do it?
i want display HTML inside h:inputTextArea it mean in DB contain <br/> or <b> and </b> , when it display on h:inputTextArea it must display bold or break line.
That's not possible due to the nature of HTML <textarea> element. Even, if it was possible this puts doors wide open to XSS injection attacks. Also, how would you ever let the enduser edit the markup in the textarea like changing bold to for example italics or to add another markup? That's plain impossible with a <textarea>.
If your sole intent is to have a rich text editor, then you need to homegrow one with help of a <div> and a good shot of JavaScript or, better, use an existing JSF component which achieves this. For example, PrimeFaces' <p:editor>.
Or, if your sole intent is to display it only, then use <h:outputText> with the escape attribute set to false. Once again, keep XSS risks in mind.
Use the f:verbatim tag -> JSF Verbatim Tag