Build my own autocomplete angularjs - javascript

Im trying to build my own search function with auto complete.
Search MAC:<br/>
<input type="text" ng-model="boxtext">
<tr ng-repeat="box in boxes | filter:boxtext">
<td>{{box.type}}</td>
<td>{{box.mac}}</td>
<td>{{box.serial}}</td>
</tr>
</table>
The problem I have now Is that all rows from boxes are printed out, and the filtered when I start typing In the text field.
I really don't know how to print out the rows from "boxes" when I start typing In the text field? Any suggestions?


You could simply add an ng-if to the preview table:
<input type="text" ng-model="boxtext">
<table ng-if="boxtetxt.length > 0">
<tr ng-repeat="box in boxes | filter:boxtext">
<td>{{box.type}}</td>
<td>{{box.mac}}</td>
<td>{{box.serial}}</td>
</tr>
</table>
This way the table is removed as long as boxtext.length > 0 is false. Note that boxtext has to be initialized to an empty string, or it will be null or undefined and will not have a length.

Related

updating values in django template in html input?

I am making a shopping cart. I want to update the value as the user updates the input field.
Here is my code:
<tr>
<th scope="row">1</th>
<td>${object['name']}</td>
<td>
<input type="number" value=1 id=${object['id']}>
</td>
<td>${object['price']*this.value}</td>
</tr>
The input field has a default value of 1. In the last tag, I am multiplying value by the price. I am using "this" keyword because I want to apply the multiplied amount to the same row.
It doesn't give me any error but it just prints "NaN" in the table not the figure.

Checkbox binding unwanted values

I have a check box:
<td class="text-center">
<div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(contract.fields[5].htmlName)" data-strat-model="contract" data-field="contract.fields[5]"></div>
</td>
When clicked it is changing some field values. The 2nd and 3rd column change to N, 12.
I tried adding bind-once to the div and there was no effect. Then I tried ng-non-bindable and the checkbox dissapears.
How can I get this checkbox not to have an effect?

Dynamic text in input form through JavaScript

I have a html input form which uses a table with 3 columns for proper alignment of HTML controls. The input data is used to generate a MySQL query. In column 1 there is text which helps the user understand what the controls in column 2 mean. In column 2 there are dropdownlists or text input. In column 3 there is the submit button and a help button (not relevant).
<div class="input_frm">
<form method="post" action="<?php print data_clean($_SERVER["PHP_SELF"]);?>">
<table class="input_tbl">
<tr>
<td class="a">Select province</td>
<td class="b"><select id="selProvincie" name="Alfa" onchange="ProvincieChg()"></select></td>
<td class="c"><input class="button_face" type="submit" value="Submit"></td>
</tr>
<tr>
<td class="a">Select region</td>
<td class="b"><select id="selRegiune" name="Beta" onchange="RegiuneChg()"></select></td>
<td class="c"></td>
</tr>
...
</table>
</form>
</div>
My question is: How can I change the text in column 1 (in lower rows) through JavaScript based on user input (in upper rows) ? Can I reference the cells of the table in the JavaScript DOM ? Or... ?

Here is the solution to my question: span tags and Javascript
You enclose the text in span tags
<td><span class="aa">This text can be changed in Javascript</span></td>
and then you can change it in JavaScript.

Not able to display number of rows in a table based on drop down or input field

I have a table with 'n' number of rows and by default i have set to display 10 rows in each page as the table is a paginated column.
I am now trying to include a text box where user can enter number of rows that has to displayed in each page as below:
<input type="number" min="1" max="100" ng-model="rowsperpage"/>
I have defined in my controller
$scope.rowsperpage = 10;
This is basically a smart table, trying to figure this out from past 3 hours and thought getting some help from you folks out there.
Please point me if am doing in wrong way, am pretty new to angular world.

Bind your property to st-items-by-page in st-pagination:
<table st-table="rowCollection">
...
<tfoot>
<tr>
<td>
<div st-pagination="" st-items-by-page="rowsperpage"></div>
</td>
</tr>
</tfoot>
</table>
for more info check:
http://lorenzofox3.github.io/smart-table-website/

Hiding empty inputs by parent row in jquery

I have the following HTML:
<table>
<tr class="row">
<td class="field">
<input type="text" />
</td>
<td class="field">
<input type="text" />
</td>
<td class="field">
<input type="text" />
</td>
</tr>
<tr>
...
...
</tr>
</table>
I want to be able to hide the <tr> with the class="row" but only when the input within the <td> with the class="field" is empty when the page loads.
I've tried this, but it doesn't work:
$('td.field:text[value=""]').parents('tr.row').hide();
However, for some reason, this DOES work:
$('td.field).parents('tr.row').hide();
(ie: it hides all of the rows with class="row")
Also, the following DOES work:
$('td.field:text[value=""]').val('test');
(ie: all empty inputs are populated with 'test' on page load)
I'm new to JQuery so I'm suspecting that I may have just misunderstood the way chaining works. can anyone give me any pointers? It semms like the two parts of what I am trying to do are correct when attempted separately, but don't work together as one.

I think it should be in this way:
$('td.field :text[value=""]').parents('tr.row').hide();
The reason: :text (input) is child from td.field. If you put td.field:text it's wrong because they are diferente selectors.

and why dont you go the oposite way - select the INPUT with empty value, and than go to its
parents().parents().hide()
first parents to get TD, the second one to get TR

Categories

Resources