Autor Zpráva
Prochy
Profil
Zdravim,

je možný nějak dosáhnout vícebarevného inputu? Dejme tomu, že máme text "Karel Novák" a "Kar" by byl černým písmem, "el Novák" by byl šedým písmem. Jde mi o to, že bych rád vyhledával ajaxově klienta, a aktuálně nalezený klient by se zobrazoval šedým písmem pod tím aktuálním filtrem, což je např to "Kar". Počítám s tím, že to asi nepůjde přímo jedním inputem a bude nutné použít např. dva inputy jeden s černým písem, druhý s šedým písmem. Zkoušel toto někdo řešit?

Jinak např. toto je funkční, ale samozřejmě pouze pro toto zadání, ale každý písmeno má jinou šířku a v tom vidím největší problém:
<input type='text' style="margin:0;padding:0;color:black;border-right:none;float:left;width:20px;" name="filter" value="Kar">
<input type='text' style="margin:0;padding:0;color:gray;border-left:none;" name="searchClient" value="el Dvořák">

Děkuji
_es
Profil
Prochy:
je možný nějak dosáhnout vícebarevného inputu?
Nie je. Je určený na písanie nenaformátovaného textu. Ak to chceš, musíš použiť iný element.
Chamurappi
Profil
Reaguji na Prochyho:
Nebylo by normálnější místo šedého textu použít jednoduše označený text, jako to funguje na řadě jiných míst s dokončováním? Když by člověk psal dál, označený text přemaže, když ne, je to Karel Novák.
1Pupik1989
Profil
Teoreticky by to mohlo jít divem, který by byl pod inputem jako pozadí a do něj napsat nalezenou hodnotu. Input by samozřejmě musel mít transparentní pozadí.
janbarasek
Profil
Prochy:
Můžeš použít třeba nějaké neproporcionální písmo a tím dosáhneš toho, že všechny znaky budou mít stejnou šířku.

Mnohem lepší řešení by bylo ale to, že bys třeba zobrazil našeptávač, kde bude hledaný řetězec zvýrazněný, protože takto se může snadno stát, že budu chtít text smazat, ale odmažu jen jeden input a budu se divit, proč ten text stále v tom druhém zůstává.

Možná by nebylo na škodu pod textem vytvořit podtrhnutí vybraného řetězce, ale nějak decentně, aby to nevypadalo jako odkaz.
Prochy
Profil
Chamurappi:
Nebylo by normálnější místo šedého textu použít jednoduše označený text, jako to funguje na řadě jiných míst s dokončováním?

Tohle bude asi nejlepší, snažil jsem se najít nějaké příklady daných našeptávačů, ale většinou to bylo ve stylu, že vyjela nějaká nabídka pod inputem. Tohle by neměl být problém udělat.


Tak jsem teď nad tím laboroval a zjistil sem, že nejsem schopen přijít na to, jak označit javascriptem text. Našel jsem akorát funkci getSelection, ale to pouze zjistí vybraný text, nebo jsem na to aspoň nepřišel. Napadlo mě, že bych javascriptem nasimuloval zkratku CTRL+SHIFT+RIGHTARROW, ale na to jsem bohužel taky nepřišel, jak to provést.
Prochy
Profil
Tak všechno už jsem to vyřešil. Kdyby měl někdo zájem přikládám zde i výsledný kód, nakonec to je ve většině řešeno pomocí jQuery. Nejsem žádnej expert na JS, ale mě to prozatím vyhovuje. Přijmu kritiku, ale nebudu to asi nějak extra upravovat. :-)

var buildGetUrl = function(params,item){
        var url = '?';
        for(var i=0;i<params.length;i++){
           url+=params[i][0]+'='+item[params[i][1]]+'&'; 
        }
        return url;
    }   
        
    var searchFunc = function(dataSource,inputName,outputParams,redirectUrl,redirectFalseSearchUrl,
    sendValueFalseSearch) {              
        var urlParams;
        var countChars = 0;
        var searchText = null;
        $(inputName).autocomplete({
                        source: dataSource,                         
                        response: function(event, ui) {                           
                        if(ui.content != null){
                            urlParams=buildGetUrl(outputParams,ui.content[0]);                                
                            $input = $(inputName);                                                    
                            $input.val(ui.content[0].value);                                                    
                            var field =  $input.get(0);                           
                            field.setSelectionRange(countChars, $input.val().length);        
                            field.focus();
                        }
                        else urlParams = null;
                    },
                        change: function( event, ui ) {                    
                        if(ui.item!=null)
                                window.location.href=redirectUrl+buildGetUrl(outputParams,ui.item);
        },    
                        focus: function(event,ui){                            
                            urlParams=buildGetUrl(outputParams,ui.item);
                        },
                        select: function( event, ui ) {                        
                        if(ui.item!=null)
                                window.location.href=redirectUrl+buildGetUrl(outputParams,ui.item);

        },
        });    
    
    $(inputName).on('keyup',function(event){        
        countChars=($(this).val().length);        
            }
    )
    
    $(inputName).on('keydown',function(event){                               
        if(event.which==13){                                          
            if(urlParams)    
                    window.location.href=redirectUrl+urlParams;    
            else if(redirectFalseSearchUrl) 
                window.location.href=(sendValueFalseSearch)?redirectFalseSearchUrl
                    +'?&'+sendValueFalseSearch+'='+$(this).val():redirectFalseSearchUrl;
                }
    });
    };

Zde příklad napojení na input:
searchFunc({link ajax, 'search'=>'client', 'limit' =>10},"#searchClient",[["clientId","clientId"]]
   ,{link Client:detail},{link Client:new},['name']);  
Kubo2
Profil
Prochy:
Takmer celé to je čisté JS. jQuery si zrejme potreboval iba na zjednodušenie vyhľadávania elementov a naväzovania udalostí. Kľudne si to všeobecne mohol napísať aj takto:
// v inputElement máš referenciu na daný <input>
inputElement.onudalosť = function(e) {
  var event = window.event || e;
  // ...
}
Chamurappi
Profil
Reaguji na Kuba2:
Také mě to na první pohled napadlo, ale na druhý pohled jsem si tam všiml $(inputName).autocomplete, což už bude kapku složitější funkce (i když ne o moc).
Prochy
Profil
Ano, jquery je využito hlavně u autocomplete. Asi bych to za nějaký čas vytvořil i se samotným javascriptem, ale jelikož už je využíváno jQuery, tak bylo pro mě snažší využít tohoto frameworku.
Kubo2
Profil
Chamurappi:
Také mě to na první pohled napadlo, ale na druhý pohled jsem si tam všiml $(inputName).autocomplete
Máš pravdu. Mal by som byť dôslednejší. Druhý pohľad som totiž tým päťdesiatim riadkom už nevenoval.
Prochy
Profil
Jinak měl bych jeden doplňující dotaz k JS. Proč tento alert vyhodí pouze to, co je v podmínce? Očekával bych, že se to spojí a vyhodí to celý řetězec. :-)

alert("Adresa1"+(1)?"Adresa2":"Adresa3"+"Adresa4");

http://jsfiddle.net/5G4tG/
juriad
Profil
Protože plus má větší prioritu než ternární operátor:
Vyhodnotí se to napřed na:
alert("Adresa11"?"Adresa2":"Adresa3Adresa4");
"Adresa11" je považována za true a tedy výsledkem je:
alert("Adresa2");

Ty ale nejspíš chceš uzávorkovat ternární výraz:
alert("Adresa1"+((1)?"Adresa2":"Adresa3")+"Adresa4");
Prochy
Profil
Jasný, díky za vysvětlení. :-)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: