Jump to content

Recommended Posts

Hi Everyone.

I would like to create a dropdown list with the features described below and have played around with various existing code on the web, however, I thought it would be wise if I found out first if my aim is even possible to start with before exerting any further effort on something that has no chance of working.

My knowledge on the subject is very limited; I am familiar with basic HTML and am able to modify/combine some code from existing examples/demos. I am posting in the JavaScript section of the forums as I presume that JavaScript will be necessary. The features I have described below are all that I require; I don't need a whole bunch of 'options' to change things around.

I have composed a picture (attached) to help show what I wish to achieve and have provided some explanatory notes below.

SECOND BOX:
List of all items available in alphabetical order.
List items visible upon loading.
Vertical scroll bar, as there will be hundreds of items in the list.
Each list item can be quite long so box should be wide enough, however, horizontal scroll bar if necessary; no text wrapping, only one item per line.

FIRST BOX:
Field to type search terms into. No minimum number of characters.
As soon as a single letter is typed in the box, all items that 'contain' (not only start with) that letter are revealed in the second box. Pressing backspace to delete a letter increases the list in the second box again.
Letters typed are emboldened in the second box; no highlighting, underlining or other emphasis.

AREA UNDER SECOND BOX:
Single-clicking an item in the second box removes that item from the second box and displays a block of four or three lines of text relating to that item underneath the second box.
Clicking on another item in the second box removes it from the second box and displays its corresponding block of text underneath the first block of text, i.e. in the order it was selected and NOT in the order that it originally appeared in the second box.
Single-clicking a block of text removes it from the area under the second box and displays its corresponding item in the second box again in its original (alphabetical) position.
I think I would prefer the blocks of text to be in a free area under the second box and not boxed in, however, I am not 100% sure of this and would consider a third box.

ADDITIONAL:
Must work in IE8 and IE9 and compatibility with other versions/browsers would be a bonus.
Must allow being maintained in the long term.
Speed is very important and whatever method/language/code is used needs to load as fast as possible with its features/functions responding as quickly as possible.

Note that the picture shows everything just for illustrative purposes. Of course, in an actual working example, in this instance, if 'Fruits' and 'Nuts' were displayed in the second box, the area under the second box would be blank and if the area under the second box displayed the two blocks of text, the second box would be blank.

So, my questions are:

Is the above possible?

If yes, would anyone be kind enough to point me in the right direction, i.e. advise me on which language/type of code would be most suitable for this task. Any links to similar examples/demos would be very much appreciated!

Most avenues I've come across seem to lead to JQuery! Is my task not possible without dependencies on JQuery or other/external scripts? Am I correct to assume that if I wanted everything to be hard-coded, I would require a LOT of knowledge?

Any advice would be appreciated.

Thanks.

post-202768-0-53520300-1478383405_thumb.jpg

Link to comment
Share on other sites

Yes, in general it's possible. This might be your major issue:

 

Must work in IE8

...

Speed is very important

Those 2 requirements often do not work well together. Modern browsers are orders of magnitude faster than IE8 was 7 years ago.

 

advise me on which language/type of code would be most suitable for this task

You have to use Javascript for the interface, because it's the only supported language. You can combine it with ajax requests and a server-side language on the backend which communicates with a database, but that's not strictly required. It would depend more on how much data you're dealing with, whether you want to write all of the data to the page or query a database.

 

Is my task not possible without dependencies on JQuery or other/external scripts?

jQuery is never required, for anything. jQuery is written using regular Javascript, therefore anything done in jQuery can be done in regular Javascript. jQuery might make some things easier to program, but it's usually not required and in some cases can be significantly slower to run (relatively, at least).

 

Am I correct to assume that if I wanted everything to be hard-coded, I would require a LOT of knowledge?

Yes, you'll need a fair amount of experience, but in general it's a few event handlers, adding and removing the elements and options, and dealing with a large data structure. One of the more challenging things would probably be to highlight the search term in each item, but that can also be done by replacing that content.
Link to comment
Share on other sites

Hi justsomeguy.

Thanks for your helpful advice. It really is appreciated.

The good news is that I think almost all of the computers have been upgraded to IE9, so working on IE8 may not be a major requirement after all. Speed is important, however.

Anything server-side is out of the question; it must all be client/browser side due to restricted access. At present, the list would consist of about a thousand items but probably will be added to as required. I assume that querying a database would be slower than writing the data to the page. I don't mind adding any new items directly to the script if it means a faster user experience. The network can be frustratingly slow at times!

I was recently modifying some code and was able to achieve emboldening of the search text in the dropdown list, however, that was probably as part of a JQuery script. I can't recall exactly which one it was but if I do find it again, I will post back.

It is good to know that JQuery is not a requirement and I don't like the sound of it being possibly slower, however, with my knowledge, I may have to resort to it initially as I need to have the feature ready quite quickly. If I do have to use JQuery, would I be able to achieve my task with the script at loudev.com or would something like Select2 or Chosen be better?

Below is what I have managed so far, but I have not been able to get the feature called 'searchable' to work. The box to type in just won't appear. Even if it did work, would I be able to have 'searchable' AND 'keep order'? If so, would it be possible to remove the second box and use the space below the first box to have the items moved down to instead?

 

Thanks for any advice.

 

HTML:

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.3.1/jquery.quicksearch.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="https://rawgit.com/lou/multi-select/master/js/jquery.multi-select.js"></script>
<script>

  
$(document).ready(function(){
        // $('#public-methods').multiSelect();


        $('#public-methods').multiSelect({
          afterSelect: function(values){

            var get_val = ""+$("#multiple_value").val();
            //var hidden_val = (get_val != "") ? get_val+"," : get_val;
            var hidden_val = get_val+","+values;
            $("#multiple_value").val(hidden_val);
            //$("#multiple_value").val(hidden_val+""+value);             
            //alert("Selecting value: "+values);            
            alert ( "HIDDEN value: "+ hidden_val) ;

          },
          afterDeselect: function(values){

            alert("Deselect value: "+values);           
            var get_val = $("#multiple_value").val();
            var new_val = get_val.replace(","+values, "");
            $("#multiple_value").val(new_val);
            alert("HIDDEN value after deselecting: "+new_val);
          }
        }); 

        $('#deselect-all').click(function(){
          $('#keep-order').multiSelect('deselect_all');
          $("#multiple_value").val("");
          //alert ("HERE");
          return false;
        });     

         $('#keep-order').multiSelect('addOption', { value: 'OPT8', text: 'Option 8',  });
         $('#keep-order').multiSelect('addOption', { value: 'OPT9', text: 'Option 9',  });
         $('#keep-order').multiSelect('addOption', { value: 'OPT10', text: 'Option 10'  });       
         $('#keep-order').multiSelect('addOption', { value: 'OPT11', text: 'Option 12'  });         
         $('#keep-order').multiSelect('addOption', { value: 'OPT12', text: 'Option 13'  });         
         $('#keep-order').multiSelect('addOption', { value: 'OPT13', text: 'Option 14'  });         

});
</script>    

 </head>
<body>    

    <a href='#' id='deselect-all'><p style="font-family: Arial, Helvetica, sans-serif; font-size:14pt">Deselect All</p></a>       

    <select id='keep-order' multiple='multiple'>
        <option value="OPT1">Option 1</option>
        <option value="OPT2">Option 2</option>
        <option value="OPT3">Option 3</option>
        <option value="OPT4">Option 4</option>
        <option value="OPT5">Option 5</option>
        <option value="OPT6">Option 6</option>
        <option value="OPT7">Option 7</option>
    </select>     

 <input type="hidden" name="multiple_value" id="multiple_value"  />

</body>
</html>

CSS:

.ms-container{
  background: transparent url('../img/switch.png') no-repeat 50% 50%;
  width: 370px;
}

.ms-container:after{
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  font-size: 0;
  clear: both;
  min-height: 0;
  visibility: hidden;
}

.ms-container .ms-selectable, .ms-container .ms-selection{
  background: #fff;
  color: #555555;
  float: top;
  width: 500%;
}
.ms-container .ms-selection{
  float: bottom;
}

.ms-container .ms-list{
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  position: relative;
  height: 208px;
  padding: 0;
  overflow-y: auto;
}

.ms-container ul{
  margin: 1;
  list-style-type: none;
  padding: 0;
}

.ms-container .ms-selectable li.ms-elem-selectable,
.ms-container .ms-selection li.ms-elem-selection{
  border-bottom: 1px #eee solid;
  padding: 0px 1px;
  color: #555;
  font-size: 21px;
  font-family: Arial, Helvetica, sans-serif;
}

.ms-container .ms-selectable li.ms-hover,
.ms-container .ms-selection li.ms-hover{
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  background-color: #08c;
}

.ms-container .ms-selectable li.disabled,
.ms-container .ms-selection li.disabled{
  background-color: #eee;
  color: #aaa;
  cursor: text;
}

JS:

$('#keep-order').multiSelect({ keepOrder: true });
Link to comment
Share on other sites

I don't mind adding any new items directly to the script if it means a faster user experience.

If server-side code is not an option then writing out your data structure in the code is really the only thing you can do. Speed wouldn't come into play much, it wouldn't take long to get the data from another source in a way where it's easy to maintain that data but if you're not using a server then that's not an option.

 

If I do have to use JQuery, would I be able to achieve my task with the script at loudev.com or would something like Select2 or Chosen be better?

I'm not familiar with those, you'll just need to look into them and see if they meet your needs.

 

Below is what I have managed so far, but I have not been able to get the feature called 'searchable' to work. The box to type in just won't appear.

It looks like you're trying to include a jQuery plugin before including jQuery. You need to include jQuery before any plugins.

 

If so, would it be possible to remove the second box and use the space below the first box to have the items moved down to instead?

I'm not sure which plugin you're using there or what its features are, but if they have documentation you can check there to see what it can do. It seems like you need more than a multiselect box though, because you want to add additional elements onto the page. Maybe you can use an event handler for the select list to handle that part though, if it makes those events available. It's also showing data that isn't in the select list, so that will probably go back to your data structure where you store all of the possible terms and their other options.
Link to comment
Share on other sites

Thanks for the reply, justsomeguy.

 

I am able to publish webpages (limited access) on the organisation's Intranet via SharePoint. The feature I have described won't actually be published as a webpage, but saved in the documents section of SharePoint and the users will just be provided with a link to the HTML file. Would saving a separate data source file in the above manner work? Is that the same as having access to the 'server'?

 

I have tried re-ordering the JS parts as follows, but the search boxes still aren't appearing as they should.

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="https://rawgit.com/lou/multi-select/master/js/jquery.multi-select.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.3.1/jquery.quicksearch.js"></script>
<script>

As mentioned previously, it is the 'searchable' feature here which I was trying to use.

 

I have now also tried to see if I am capable of creating it all from scratch, however, examples of text search dropdowns seem to be VERY limited on the web and even the two or three that I have found, appear fine on the actual websites' demo pages but when the same code is pasted into an online code test site, I keep getting a button drop down as well as an empty text box. Also, the examples of dropdowns on W3Schools are all button dropdowns; I couldn't find any with search boxes at all.

 

Thanks.

Link to comment
Share on other sites

I don't know enough about how Sharepoint works. You can always put your data structure in the same document, it's just a little more difficult to maintain. If the browser launches the file with an HTTP URL then you can use ajax to load an external file also.

 

For that searchable demo, your code doesn't have the 2 custom header properties that the demo has to put the search fields there. The demo also has some code to handle keydown events for each of those search fields.

 

Also, the examples of dropdowns on W3Schools are all button dropdowns; I couldn't find any with search boxes at all.

If you want to build it yourself then break it down into smaller pieces. Like other things, you probably aren't going to find one tutorial that perfectly matches exactly what you're trying to do. Break it down into smaller pieces that you can learn about individually before putting them all together to do what you want.
Link to comment
Share on other sites

Hi justsomeguy.

 

I removed the code for the 'searchable' feature before I posted my code here as it wasn't working. I've only posted the part of the code that did work. What I did was replace the term 'keep-order' with 'custom-headers' and pasted all of the code provided at the website in the black box into the javascript section of the online code testing site, but the search boxes still didn't appear.

 

Doing it bit by bit is exactly what I was trying to do but I couldn't find a text search box example to start with. You say that I 'probably' won't find a tutorial that matches my requirements. I can safely say that I 'DEFINITELY' won't find one that's even close!

 

I think I may have to resort to JQuery initially, as I won't be able to complete the task on time via the other option.

 

Thanks again for taking the time to respond.

Link to comment
Share on other sites

Doing it bit by bit is exactly what I was trying to do but I couldn't find a text search box example to start with.

There's a live search example on the w3schools site which sends an ajax request and shows the results, but again that's not exactly what you're looking for. You won't send an ajax request, you'll have the data structure defined locally and you'll search through that with Javascript instead of a server-side language. If you narrow your search terms I imagine you could find things similar, but it's more general programming knowledge and things like that. For example, you'll need to understand arrays and objects in Javascript because your data structure will be an array of objects. You'll need to loop through the array and compare each object with the search term, and decide which options to show or hide in the select list (if it's an actual select list instead of a div that mimics one). Then when one of them is clicked on you'll need to look up that object in the array and build the additional elements to display farther down the page. So it's a series of smaller things that each need to be learned, but you'll still need some Javascript knowledge in general.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...