Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1240
  • Last Modified:

dynamically add element to select list?

Hi

Is it possible to dynamically add an item to a select list. I have this html for the list
 
<select class="chosen-select" autocomplete="on" data-placeholder="Recipients" multiple="" style="display: none;">
<option value=""></option>
<option value="Anna Fat">Anna Fat</option>
<option value="Bilbo Bagens">Belbo Bagens</option>
<option value="Catherine Zones">Catherine Zones</option>
lots more options
</select>
<div class="chosen-container chosen-container-multi" style="width: 100%;" title="">
<ul class="chosen-choices">
<li class="search-field">
<input class="default" type="text" style="width: 85px;" autocomplete="off" value="Recipients">
</li>
</ul>
<div class="chosen-drop">
<ul class="chosen-results">
<li class="active-result" data-option-array-index="1" style="">Anna Fat</li>
<li class="active-result" data-option-array-index="2" style="">Belbo Bagens</li>
<li class="active-result" data-option-array-index="3" style="">Catherine Zones</li>
lots more .....
</ul>
</div>

Open in new window


If i enter text which isnt in the list I get this
 
<div class="chosen-drop">
<ul class="chosen-results">
<li class="no-results">
No results match "
<span>xxx</span>
"
</li>
</ul>
</div>

Open in new window


This code seems to come from chosen,jquery

 Chosen v1.0.0 | (c) 2011-2013 by Harvest | MIT License, https://github.com/harvesthq/chosen/blob/master

line 148

AbstractChosen.default_no_result_text = "No results match", AbstractChosen

Open in new window


This is beyond me. Perhaps I need a different ui element such as a combobox
http://www.usamimi.info/~sutara/ajax-combobox/

Thanks for any help you can offer
0
andieje
Asked:
andieje
  • 4
  • 3
  • 2
1 Solution
 
RobOwner (Aidellio)Commented:
Are you not just doing an AutoComplete?

http://jqueryui.com/autocomplete/
0
 
MurfurFull Stack DeveloperCommented:
I think this looks more like related selects
@Andieje - can you post the query code from your page
0
 
RobOwner (Aidellio)Commented:
Another candidate for knockoutjs.com.  you can create your own logic and set selects to arrays that when manipulated by script will automatically update the dom.  something to think about.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
andiejeAuthor Commented:
I am not trying to do a related select or an autocomplete. I would like to add a new item to the select list if the user tries to type it like on this example

http://www.usamimi.info/~sutara/ajax-combobox/
0
 
andiejeAuthor Commented:
This is an example of what I mean only it is not finished and unsupported
http://jqueryui.com/autocomplete/#combobox
0
 
MurfurFull Stack DeveloperCommented:
You say you are not trying to do an autocomplete and yet you post an example of an autocomplete...

I can't quite see what you are trying to achieve with the code you have posted - I get the idea of selecting a name from the dropdown and it being added to the unordered list below and this can be done easily enough with jQuery's .append
$("div.chosen-drop ul.chosen-results").append('<li class="active-result" data-option-array-index="" style="">New Name</li>')

Open in new window

remembering to increment the data-option-array-index but I don't get the need for the search box unless that is your autocomplete search input in which case you can dispose of that and correct the select element above to include the autocomplete function.

See the multiple value autocomplete sourcecode here: http://jqueryui.com/autocomplete/#multiple

I'm not trying to teach you to suck eggs (below) but I'm guessing that there is some confusion somewhere so a quick reminder :)

The dropdown values of an autocomplete are populated with existing values that match the search string i.e. the letters you are typing in. Any new value not found in the autocomplete dropdown will be saved on form submission and will be displayed next time the page/combo-box is loaded.

You can append a new value temporarily to the dropdown with but at which point are you telling the page that you have finished entering the new value and are now ready to append what you have written?

Being temporary, this newly appended value will be lost on reload or when the autocomplete fires again.

Is any of that helpful or can you offer some clarification of your requirement?
0
 
andiejeAuthor Commented:
I have solved the issue myself using the theird party combo box
index.php

        <form>
      <input id="ac01_01" type="text">
      <input type="button" value="Check the value." onclick="displayResult('ac01_01')">
        </form>

Open in new window


ajax postback to post.pjp

<?php
//print_r($_POST);

$test_id = $_POST["testid"];
$new_name = $_POST["name"];

if ($test_id == "") {
	//echo "new item";
	//echo $new_name;
	//write to database 
	$con=mysqli_connect("localhost","test","test","test");
	// Check connection
	if (mysqli_connect_errno()) {
		echo "Failed to connect to MySQL: " . mysqli_connect_error();
	}

	mysqli_query($con,"INSERT INTO nation (name) VALUES ('$new_name')");
	mysqli_close($con);
	
}
else
{
	echo "Response : " . $test_id;
}
?>

Open in new window


Please dont be disgusted with the database code - i was just rushing
0
 
MurfurFull Stack DeveloperCommented:
Not disgusted at all and yes it will work, but it niggles my sense of tidy logic as it appears to turn a dropdown selection into a three step process rather than one.

1. Click dropdown - required item not present
2. Add required item to form field and submit, re-populating dropdown
3. Click dropdown again and select required item.

or using there autocomplete methods mentioned earlier:

1. Type required item name into field
If item is present it appears automatically, or if not you continue typing then move to the next field in the form.
When the form is submitted, the new item is added to the database and will be available to populate the dropdown on the next load of the form.

Obviously, this all depends on the application requirement and an assumption that whoever is submitting the form has some idea of what value they want in the dropdown on the form! :)
0
 
andiejeAuthor Commented:
Thanks for your assistance. I am using the latter implementation in your last comment
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now