create a drop down list in search bar in HTML - javascript

I have created a dropdown list on my webpage using a basic statement in HTML but it is in the body section of my page. I added a search bar in my topnav and have been attempting to move this dropdown list so it appears there once someone clicks in the field or starts to type, but the data in the dropdown list is from an SQL database (corporate company) and not a predefined list such as . I am using local ASP to pull the data from SQL, and HTML & Java to populate it.
Does anyone know how to write the HTML & Java so that the dropdown list with my data appears in the search bar once someone clicks in the search bar? My code is below.
This is my logic that originally worked
<select id="containerlist" onchange="newcontainer()"></select>
This is the logic that I have been trying
<div class="search-container">
<input id='input' type="text" placeholder="Container #.." onkeyup="filterFunction()"<select id="containerlist" onchange="newcontainer()"</select>/>
<button type="submit">Search</button>
</div>
I also tried the code below but not sure what I would put in the value section for the option...
<div class="search-container">
<input type="text" list="containerlist" />
<datalist id="list">
<option> id="containerlist" value="?"</option>
</datalist>
</div>
The output should be, I can click into the search bar, and start to type and the dropdown list will appear and filter as I continue to refine my search.

Related

How to show a form conditionally using Thymeleaf?

I am struggling with a problem to show a form conditionally using Thymeleaf. I want to show a form as in the image below: Hide form using Thymeleaf
Initially the pick up id column should show some text like 'edit' or 'n/a' with a link and when the user clicks on the link(or button) then only the edit box should be visible as in the image.
As you can see I have already created the form but I am having trouble with hiding the form and showing it only upon clicking a link or button and when user clicks on save, the id is saved to database(already done) and the entered id should be shown instead of the form.
I searched a lot about it but could not find anything using thymeleaf. I had found some related answers using JavaScript/jQuery but I need Thymeleaf.
The relevant part of the code
<td>
<a><span th:if="${ticket.pickedUp} ? ${ticket.pickUpId} : 'N/A'"></span>
<form th:action="#{/updatePickupId/{id}(id=${ticket.id})}"
th:method="post" th:style="'display: hidden'">
<div class="checkbox-list w-150px">
<input type="text" name="pId" value=""
placeholder="Pick Up Id"
th:classappend="${ticket.pickedUp} ? 'required' : ''">
<input type="submit" value="Save"/>
</div>
</form>
</a>
</td>
As you can see I have used th:style="'display: hidden'" in the form but I don't know why its not working and the form is visible all the time.

Send the dropdown value for each row form

I have a dropdown value out of forms and a table wih many rows to submit data.
What I'd like to do is during submit of each row submit also the getting value from the drop down list.
My table it's look like My code for dropdrown list is
<div class="panel-heading">
<label for="cat">Select a Category</label>
<select class="form-control" id='category' name="category" data-live-search="true" style="max-width:40%;" >
<?=$html?>
</select>
</div>
And the part for table rows is
<form id="sync-cat" action="controllers/product-add.php" target="_blank">
<input type="hidden" name="product" value="<?=$product['id']?>">
<button type="submit" class="btn btn-info btn-md">Sync Products</button>
</form>
I've tried with javascript copying selected value in hidden input but that run only for the first row. Also I've tried a hidden input above the dropdown list copying the select option but I didn't find a way to get value when I use submit button "Sync Products"
They should share the same form in HTML so that when the form is posted all available information is present in the form. Regardless your dropdown should also be in it's own form (if you don't put them in the same form) to be valid.
If you wanted to continue as is ignoring the proper things to consider above you could do it with something like this. This solution will make things a bit more complicated. I would recommend taking the above advice.
var form = document.getElementById('sync-cat')
form.addEventListener('submit', function(e) {
var valueFromDropDown = document.getElementById('category').value;
// Post the rest of the form
});
Follow the rest of this guide to complete the JavaScript post

how to edit the existing content in the angularjs

Hi Im creating an app using ionic and angularjs. The problem I face is in the editing. I have a two view pages, one view will list the car names, when a car name is selected it will be redirect to the second view page where the information regarding the selected car is listed and also editable . Im able to get it till here but I don't know how to edit the content. I tried using contenteditable along with <div> property but angularjs can't bind the ng-model property. So please help me how to edit the read information so that the edited information are updated. Thank you.
Selected Car:
<input type="text" ng-model="editedName">{{selectInput.name}}</div>
<br><hr>
Selected options:
<div ng-repeat="type in selectInput.types" ng-model="selectedTypes">
{{type}}
</div>
</div>
<br><hr>
<button ng-click="Update($index)">Update</button></div>

Display AngularJS inputs from the frontend

I'm currently working on an AngularJS project where user inputs from a drop down list and a text box on a page can be displayed on a new page. For instance, selecting option of Mr and entering a name which is then displayed on a new page as "You're Mr YourName." How can this be done? Any help?
<select ng-model="title">
<option>Mr</option>
<option>Ms</option>
</select>
<input type="text" ng-model="yourName">
You're {{title}} {{yourName}}

Hide div after sorting

I have Google Maps with properties pins, and a search box below it. After the user clicks on "sort", pins are shown based on user's criteria. I'm looking for a solution that would allow me to hide the search box, and only leave the box "Show search", instead of "Sort".
Here is the image how it currently looks:
http://i.imgur.com/S1q1xNH.jpg
And here is part of the search box code:
<div class="main-search">
<form id="main-search" method="post" action="#">
<!-- search box fields here -->
<input type="submit" value="Sort" class="search-submit" id="search-submit" />
</form>
</div>
How can I fix this problem?
A simple demo is at http://jsfiddle.net/xekR9/1/.
Don't forget to change return false to return true to allow PHP post.
I am not sure what you mean to leave the show search, but to hide the button do this:
$('.search-submit').on('click',function(){
$(this).hide();
});

Categories

Resources