Print Page - searchbox: setting message if not found.

Title: searchbox: setting message if not found.
Post by: vladj on December 19, 2018, 08:45:18 AM

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

(http://jeasyui.com/documentation/images/validatebox.png)

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

Is it possible? If so - how?

Thanks in advance!

Title: Re: searchbox: setting message if not found.
Post by: jarry on December 19, 2018, 05:38:03 PM

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

Code:

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

Title: Re: searchbox: setting message if not found.
Post by: vladj on December 20, 2018, 10:13:27 AM

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!

Title: Re: searchbox: setting message if not found.
Post by: jarry on December 21, 2018, 03:32:27 AM

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')

Title: Re: searchbox: setting message if not found.
Post by: vladj on January 14, 2019, 09:00:12 AM

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'">

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: vladj on December 19, 2018, 08:45:18 AM