searchbox: setting message if not found.

[vladj]

Hi!

I am using searchbox like this:

Code:

<input id="search" style="width:200px;">

and

Code:

	$('#search').searchbox({
    	searcher: doSearch,
	    prompt: 'Enter search string'
	});

In case doSearch() is unsuccessful I'd like to set the error message on the searchbox  similar to



but - of course - with different text, like "not found".

Is it possible? If so - how?

Thanks in advance!

[jarry]

The searchbox component extends from validatebox, all the validating rules can be applied on this component.

Code:

$('#sb').searchbox({
	required: true
})

[vladj]

Sorry Jarry, but it does not answer my question.

My question is not how to make the search field required, but rather how to show the "tooltip"  similar to the "This field is required", BUT with:

• custom text
• later, after the return from asynchronous doSearch() function specified by "searcher:".

There seems to be no obvious way of doing it.

Your help is greatly appreciated!
 

[jarry]

To display the tooltip, create it on the box.

Code:

$('#sb').searchbox('textbox').tooltip({
	content: 'msg'
})

Call the 'update' method to update the tooltip content.

Code:

$('#sb').searchbox('textbox').tooltip('update', 'new msg')

[vladj]

I finally managed to implement it in the same look an feel as the original error message tooltip. Here it is:

Code:

$.extend($.fn.searchbox.methods, {
	showError: function(jq, text) {
		return jq.each(function() {
                var textbox = $(this).searchbox('textbox');
		textbox
		        .addClass('textbox-invalid')
			.tooltip({
				content: text,
				position: "right",
				deltaX: 24
			})
			.tooltip('show')
			.tooltip('tip').css({
				color: "#000",
				borderColor: "#CC9933",
				backgroundColor: "#FFFFCC"
			});
		});
	}
});

And to call it just use

Code:

	$('#search').searchbox('showError','Not found');       

Where the searchbox is defined with the 'search' ID:

Code:

<input id="search" class="easyui-searchbox" style="width:300px"
		data-options="prompt:'Please Input Value'">