Because I didn’t found any example of Yii autocomplete function. particularly showing how to fetched data via a server request.
For the widget function in view:
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'name' => 'username',
'value' => $model->username,
'sourceUrl' => array('user/getusername'),//path of the controller
'options' => array(
'minLength' => '1', // min chars to start search
'select' => '' // when the value selected
),
));
Now, we start create the
getusername action in the
UserController file.
To highlighter table row when user click the row. The easy way was add a css class on table “tr”.
How to add a css on “tr”? you need used JQuery to perform this action.
Before that, you need a table like below:
<div id="gridview">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
</tr>
</table>
</div>
And then add the “
highlighted” css class as well
.highlighted {
color: #261F1D
background-color: #E5C37E;
}
How to using jQuery search the array key or check for a key exists in an array.
Since JavaScript doesn’t really have associative arrays, then we only write a function to check.
Use a short code to get a value from the database the easy way is using Ajax.
But the short code and value are fixed, we keep it in database is for future reuse it.
So I use another way to get the value. That is an array. use array key find the value.
Use jQuery remove white space to avoid user escape required field.
There is one of the functions from jQuery which help to solve this problem.
Because want use jQuery get the input box value but the input box without the id attribute.
Then need use name attribute to find the input box get the value.
Following last post
Javascript Date Range Picker it was using pure javascript without using any framework.
Now we built another with JQuery.
I think a lot of people looking how to use javascript built the date picker with start date and end date. Normally how we did is just create 2 field with START DATE and END DATE. but the END DATE still can choose early then START DATE.
And we only can using javascript code to solve it.