TypeScript h.select方法代碼示例

export function nutrientSelect(args: {onChange: (nutrientId: string) => void, onLoad: (nutrient: api.Nutrient) => void}) {
    const $select = h.select({
        onchange: () => args.onChange($select.value)
    }, [
        h.option({disabled: true, selected: true}, ['Select a nutrient...'])
    ])

    get<api.Nutrient[]>(`${serverUrl}/nutrients`).then(nutrients => {
        nutrients.forEach(n => $select.appendChild(
            h.option({
                value: n.Nutr_No,
                title: n.display_name ? n.NutrDesc: ''
            }, [
                `${n.display_name || n.NutrDesc} (${n.Units})`
            ])
        ))

        if (nutrientId) {
            const nutrient = nutrients.find(n => n.Nutr_No === nutrientId)
            if (nutrient !== undefined) {
                $select.value = nutrientId
                args.onLoad(nutrient)
            }
        }
    })

    return $select
}

export function findFoodsModal() {
    const $foodGroupSelect = h.select({
        oninput: () => {
            findFoodsByNameAndGroup($foodNameInput.value, $foodGroupSelect.value)
            if (!$foodNameInput.value) {
                $foodNameInput.focus()
            }
        }
    }, [
        h.option({value: '', selected: true}, ['All food groups'])
    ])

    get<contract.FoodGroup[]>(`${serverUrl}/foods/groups`)
        .then(cats => {
            cats.forEach(cat => {
                $foodGroupSelect.appendChild(
                    h.option({value: cat.FdGrp_Cd}, [cat.FdGrp_Desc])
                )
            })
        })

    const $foodNameInput = h.input({
        type: 'search',
        className: 's1',
        placeholder: 'Enter at least 3 characters, e.g. "lentils cooked"',
        oninput: () => findFoodsByNameAndGroup($foodNameInput.value, $foodGroupSelect.value)
    })

    const $resultList = h.ul()

    const $modal = h.div({className: 'hidden find-foods-modal'}, [
        h.div({className: 'h box'}, [
            $foodGroupSelect,
            $foodNameInput,
            h.button({onclick: close, title: 'Close (Esc)'}, [icon('times')]),
        ]),
        $resultList
    ])

    function handleEsc(evt: KeyboardEvent) {
        if (evt.key === 'Escape') {
            close()
        }
    }

    function open() {
        $modal.classList.remove('hidden')
        $foodNameInput.focus()
        document.addEventListener('keydown', handleEsc)
    }

    function close() {
        $modal.classList.add('hidden')
        $foodNameInput.value = ''
        document.removeEventListener('keydown', handleEsc)
    }

    function findFoodsByNameAndGroup(name: string, groupId: string) {
        if (name.length <= 2) {
            return
        }

        const urlName = 'name=' + name.replace(/\s/g, '%')
        const urlGroupId = groupId ? '&groupId=' + groupId : ''

        get<contract.FoundFood[]>(`${serverUrl}/foods/search?${urlName}${urlGroupId}`)
            .then(foods => {
                $resultList.innerHTML = ''

                if (foods.length === 0) {
                    $resultList.appendChild(
                        h.li({className: 'no-results'}, ['No results.'])
                    )
                    return
                }

                foods.forEach(food => $resultList.appendChild(
                    h.li({}, [
                        foodGroupCircle(food),
                        h.a({href: 'index.html?id=' + food.NDB_No}, [food.Long_Desc])
                    ])
                ))
            })
    }

    return Object.assign($modal, {open})
}

    location.href = `/top-foods/index.html?nutrient-id=${nutrientId}&unit=${unit}`
}

const $nutrientSelect = nutrientSelect({
    onChange: nutrientId => reload(nutrientId, $unitParamSelect.value as api.NutrientReferenceUnit),
    onLoad: nutrient => {
        showTopFoods(nutrient.Nutr_No, $unitParamSelect.value as api.NutrientReferenceUnit)
        $nutrientSelect.focus()
        title(`Top foods high in ${nutrient.display_name || nutrient.NutrDesc}`)
    }
})

const $unitParamSelect = h.select({
    className: 's1',
    onchange: () => reload($nutrientSelect.value, $unitParamSelect.value as api.NutrientReferenceUnit)
}, [
    h.option({value: 'gram'}, ['Per 100 grams']),
    h.option({value: 'calory'}, ['Per 100 calories'])
])

// TODO $nutrientSelect.value = ''
$unitParamSelect.value = urlUnit

const $chartWrapper = h.div({className: 'chart-wrapper hidden'})

const $chart = Highcharts.chart($chartWrapper, {
    chart: {type: 'bar'},
    title: {text: null},
    xAxis: {
        type: 'category',
        labels: {

import {h} from '@soil/dom'
import {get} from '../shared/get'
import {header} from '../shared/components/header/header'

type BasicFood = any

const selectedFoods: BasicFood[] = []

const foodSelectPlaceholderOption = h.option({disabled: true}, ['Results will appear here (up to 100)'])

const foodSelect = h.select({multiple: true}, [
    foodSelectPlaceholderOption
])

const foodSelector = h.div({className: 'food-selector'}, [
    h.div({className: 'top-controls'}, [
        h.input({
            type: 'search',
            placeholder: 'Find foods (at least 3 characters)',
            oninput: evt => {
                const text = (evt.target as h.Input).value
                if (text.length <= 2) {
                    foodSelect.innerHTML = ''
                    foodSelect.appendChild(foodSelectPlaceholderOption)
                    return
                }

                get('/find-foods/' + text)
                    .then((foods: BasicFood[]) => {
                        foodSelect.innerHTML = ''
                        foods

import {h} from '@soil/dom'
import {icon} from '../shared/dom/icon'

const page = h.div({className: 'page'}, [
    h.h1({className: 'main-title'}, ['Your profile']),
    h.form({}, [
        h.ul({className: 'field-list'}, [
            h.li({}, [
                h.label({htmlFor: 'field-age'}, ['Age']),
                h.input({id: 'field-age', type: 'number', min: '0', max: '150'})
            ]),
            h.li({}, [
                h.label({htmlFor: 'field-gender'}, ['Gender']),
                h.select({id: 'field-gender'}, [
                    h.option({value: 'M'}, ['Male']),
                    h.option({value: 'F'}, ['Female'])
                ])
            ])
        ]),
        h.hr(),
        h.button({onclick: () => save()}, [icon('save'), 'Save'])
    ])
])

function save() {
    // TODO
    console.log('Saving...')
}

document.body.appendChild(page)

    sources: FoodSource[]
}

const nbsp = '\u00A0'

const $foodGroupSelect = h.select({
    style: {
        alignSelf: 'flex-start'
    },
    onchange: () => {
        get($foodGroupSelect.value)
            .then(fillFoodList)
    }
}, [
    h.option({disabled: true, selected: true}, ['Food group']),
    h.option({value: '/beverages'}, ['Beverages']),
    h.option({value: '/breakfast-cereals'}, ['Breakfast cereals']),
    h.option({value: '/fats-and-oils'}, ['Fats and oils']),
    h.option({value: '/fruits-and-juices'}, ['Fruits and juices']),
    h.option({value: '/grains'}, ['Grains']),
    h.option({value: '/legumes'}, ['Legumes']),
    h.option({value: '/nuts-and-seeds'}, ['Nuts and seeds']),
    h.option({value: '/soupes-and-sauces'}, ['Soupes and sauces']),
    h.option({value: '/spices-and-herbs'}, ['Spices and herbs']),
    h.option({value: '/vegetables'}, ['Vegetables']),
])

// namespace html {

//     export function addOptionsToSelect(select: HTMLSelectElement, optionsData: {value: string, text: string}[]): void {
//         const optionsFragment = document.createDocumentFragment()